What's the difference between --base-href and --deploy-url parameters of angular-cli tool

Solution 1:

• Base-href is being used by routing
• deploy-url is for assets.

In most cases base-href is enough.

Please see these posts:

• https://github.com/angular/angular-cli/issues/9835

• https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/

Solution 2:

To put my scripts inside the "/test/app1/script/" folder, I use this command:

ng build --prod --base-href /test/app1/ --deploy-url /test/app1/script/

Thus my app is accessible at https://example.com/test/app1/ but my JS scripts and CSS are in the https://example.com/test/app1/script/ directory.

Solution 3:

If I want to use /users as my application base for the router and /public as a base for my assets.

ng build --prod --base-href /users --deploy-url /public 

See Shekhar Gulati's blog for a detailed example...

Solution 4:

The answers here are not completely accurate, outdated, and do not give a full explanation.

When should I use each one?

tl;dr In general use --base-href, because --deploy-url

1. is deprecated as of Angular v13
2. will decrease build speed (although, probably not too significant)
3. does not have the benefits of base href in "locating relative template (HTML) assets, and relative fetch/XMLHttpRequests."

If you need the URL to be different than where the assets are placed, the official documentation recommends setting APP_BASE_HREF manually (and differently, e.g. set --base-href to /public/ and APP_BASED_HREF to /users/ if you will serve the Angular files at https://example.com/public/ but you want the web app's URL to be https://example.com/users/)

What's the difference between --base-href and --deploy-url parameters of angular-cli tool?

Above I've already listed 3 differences.

As you have already stated in your question, --base-href sets the <base href> in the index.html (for details see the Mozilla docs and for implications see the community wiki), while --deploy-url prefixes the relative links inside the index.html file.

For example, the following index.html snippet:

<link rel="stylesheet" href="styles.HASH.css">
...
<script src="main.HASH.js" type="module"></script>

With --deploy-url /public/, will be outputted as:

<link rel="stylesheet" href="/public/styles.HASH.css">
...
<script src="/public/main.HASH.js" type="module"></script>

--deploy-url seems to literally just prefix the links, so if you instead did --deploy-url public, the output would be pretty much unusable:

<link rel="stylesheet" href="publicstyles.HASH.css">
...
<script src="publicmain.HASH.js" type="module"></script>

Lastly, if you have a template (HTML) that uses a relative link to an asset, e.g. a header.component.html that contains <img src="assets/logo.jpg">, but you use --deploy-url /public/, the link will not be prefixed and will give you a broken image. This would instead work if <base href="/public/"> is set using --base-href /public/.