Use Angular2 component in other website #2913

felixkibellus created 7 years ago

Hi,

i use the ASP.NET boilerplate with Angular2 and ASP.NET CORE. I tried to include my angular application (<a class="postlink" href="http://localhost:4200">http://localhost:4200</a>) inside a other website (<a class="postlink" href="http://localhost:3000">http://localhost:3000</a>). The use of iframe is unfortunately excluded i need to use cross domain functionality.

Therefore i used:


<!doctype html>
<html>
<head>
     <base href="/">
</head>
	<body>
		<app-root></app-root>
		<script type="text/javascript" src="http://localhost:4200/inline.bundle.js">
		</script><script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js">
		</script><script type="text/javascript" src="http://localhost:4200/scripts.bundle.js">
		</script><script type="text/javascript" src="http://localhost:4200/styles.bundle.js">
		</script><script type="text/javascript" src="http://localhost:4200/vendor.bundle.js">
		</script><script type="text/javascript" src="http://localhost:4200/main.bundle.js">
		</script>
	</body>
</html>

I configurated CORS completely this works fine.

In this case i get the following error:

GET <a class="postlink" href="http://localhost:3000/0.chunk.js">http://localhost:3000/0.chunk.js</a> EXCEPTION: Uncaught (in promise): Error: Loading chunk 0 failed.

The problem is that the GET call shold use <a class="postlink" href="http://localhost:4200/0.chunk.js">http://localhost:4200/0.chunk.js</a> and not <a class="postlink" href="http://localhost:3000/0.chunk.js">http://localhost:3000/0.chunk.js</a>.

If i change

<base href="/">

<base href="http://localhost:4200/">

all File access work fine. But in this case i get another error:

SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://localhost:4200/' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://http://localhost:3000/test.html'.

Is there an easy way to change the framework to get this running? Do you think that it is easier to change the framework or create a new angular2 project and include all services and ASP.NET boilerplate functionality by myself?

I need to include some components to diffrent html multipages. I have to use angular routing inside the multipage.

Best regards Felix

1 Answer(s)