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

Question

The documentation of Angular informs one should use --base-href parameter in the Angular application build for production when it's going to be deployed in a subfolder:

If you copy the files into a server sub-folder, append the build flag, --base-href and set the <base href> appropriately.

For example, if the index.html is on the server at /my/app/index.html, set the base href to <base href="/my/app/"> like this.

https://angular.io/guide/deployment

However, the angular-cli has the --deploy-url parameter. The documentation of the tool describes it as:

URL where files will be deployed.

https://github.com/angular/angular-cli/wiki/build

I have seen solutions that use the --deploy-url instead of --base-href when the application is going to be deployed in a subfolder.

#The question#

What's the difference between --base-href and --deploy-url parameters of angular-cli tool? When should I use each one?

Solution 1

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/.

Solution 2

• 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 3

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 4

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.

View more solutions

Comments

[Mark]

I am following this thread with my similar to this problem. Here is my command: "ng build --watch=true --baseHref=/dist/ --outputPath=D:\application_root\dist --deployUrl=/dist/". What I am trying to say is that run the app from application_root folder, but all the code for the front-end is located in the "dist" sub folder. Also do I have to copy index.html from dist to the root?

[bvdb]

it's --base-href /users/ and not --base-href /users. (missing slash)

[Ken Hadden]

This is a great answer, but be warned that it can effect lazy loading of modules. E.g.: { path: 'myModule', loadChildren: () => import( './myModule/my.module' ).then( m => m.MyModule ) }

[ahong]

Downvote until critical mistake is fixed. I know the blog doesn't have the terminating slash for --base-href but it is crucial according to official docs: The <base href> path should end with a "/", as browsers ignore characters in the path that follow the right-most "/".