Load JS files from CDN using Webpack in Angular 5

Question

I am using Angular 5 + Webpack for one of my projects. Now I want to load all assets with JS files (including lazy loaded .chunks.js files) from a CDN.

For CSS and images, I have changed the publicPath option of the webpack so I am able to load CSS and images from the CDN, but the problem is with JS files.

For JS file I have changed the <base href="{{CDN-PATH-HARE}}"> but it gives me this error

I also tried renaming the JS file using webpack but that trick also didn't work.

I just want to know whether I am going in a right direction or I should think it in a different way.

Thanks.

Answer 1

I imagine the "using CDN when performing tree-shaking" discussion could be a fairly involved one...

This answer assumes that the break happens only when switching to the CDN, and that your app is properly served otherwise. Are you sure your app is being served?

The history API is used by angular, but because the origin is different, it's being treated as a security issue.

Assuming external cache-able libraries in a CDN should be included in your bundling, you can try a couple options listed below. I would revisit that assumption first. The point of webpack is to treeshake and then bundle, so I would make sure you are convinced of the benefit of bundling files that are cached and bundled on CDN already.

If you are sure you want to take this approach, you can do a couple things. You can either use hashlocationstrategy on your angular router:

imports [
RouterModule.forRoot(routes, {useHash: true})
]

Or, you can fully host your app when building it, using node's http-server, and play with the host baseUrl in your app's index.html.

Finally, if none of that works for you, you could try using a htaccess file, or doing some manual routing, but I have found those approaches to be a little brittle.

There's a couple pre-existing questions on SO that handle this issue somewhat, but I thought the CDN wrinkle warranted a fresh response.

Angular 5 : Failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null'

ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL

How to perform redirects in NodeJS like a .htaccess file?

Maybe a better answer would be to ask this question: If your libraries never change, and you have a version update of your app, why would you force your users to re-download your libraries?