Search code examples
angularangular6cdn

Angular6: Serving assets using CDN but not Index.html - SecurityError: Failed to execute 'replaceState' on 'History'

Goal

Serve all files excluding index.html on a CDN (CloudFront). Thus the app is served on a subdomain that's different than the assets.

Problem

I used ng build --prod --aot --base-href https://mycdn.x.com to build my app, and then sent all the files over to my CDN. An nginx server is serving index.html

What happened is that on app load, I got the following error:

Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': 
A history state object with URL 'https://mycdn.x.com/' cannot be created in a document with origin 
'https://myapp.x.com' and URL 'https://myapp.x.com/page1/page2'.

Notes

  • All the files were loaded with 200 code.
  • CORS is setup for GET/HEAD with * origin.

How can I serve all assets from a CDN while keeping the app sane?

Solution

  • Found the solution, should've used --deploy-url not --base-href.

    ng build --prod --aot --deploy-url https://mycdn.x.com