/ angular

Angular (2+): Use CDN path in angular-cli generated index.html

When you do a production-build of Angular CLI projects (eg via ng build --prod), it generates the front end assets you deploy to your web server. One of those assets is the index.html app shell with that references the other JavaScript, CSS, etc files. By default, it assumes the referenced JS/CSS/etc files are in the same directory as the index.html. What if you want to make it use a custom static files path or CDN URL?

--deploy-url Option

Here's an example of the default generated index.html's content:

<!-- autogenerated `index.html` -->
<link href="styles.01c9c7541bd61c4e640f.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="main.088b42e8ae877c102072.bundle.js">

Wherever your index.html is hosted (eg served from your web server's www/public directory), it's assumed the other front end assets are located in the same directory. If you want to use a different relative path or just a different server, like a CDN, you can use the --deploy-url option of the ng build command.

Different Relative Path

To use a different relative path (like for ASP.NET or Java served index.html):
ng build --prod --deploy-url=/other/rel/path

This would generate the following in index.html:

<!-- custom relative path `index.html` -->
<!-- ng build --prod --deploy-url=/other/rel/path -->
<link href="/other/rel/path/styles.01c9c7541bd61c4e640f.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="/other/rel/path/main.088b42e8ae877c102072.bundle.js">

Note the changed href and src.

Different Hostname URL

Similarly, to use a different host/server (like a CDN):
ng build --prod --deploy-url=https://example-cdn.com/my-project

This would generate the following in index.html:

<!-- custom relative path `index.html` -->
<!-- ng build --prod --deploy-url=https://example-cdn.com/my-project -->
<link href="https://example-cdn.com/my-project/styles.01c9c7541bd61c4e640f.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="https://example-cdn.com/my-project/main.088b42e8ae877c102072.bundle.js">

Note the changed href and src.

Webpack Underneath

Underneath the Angular CLI is actually Webpack. Webpack has seen a lot of use due to how customizable and powerful it is. Angular CLI's build command's --deploy-url is actually setting the Webpack config output.publicPath. If you need more customizability (eg environment-specific config), you should eject Angular CLI to have more fine tuned control over the Webpack config.

References

  1. ng build docs
  2. Original Github pull request
  3. Webpack publicPath config