What's the difference between --base-href and --deploy-url parameters of angular-cli tool
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
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?
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/
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.
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.
--base-href /users/ and not --base-href /users. (missing slash)
--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 "/".
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
is deprecated as of Angular v13 will decrease build speed (although, probably not too significant) 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/.
Follow WeChat
Success story sharing
{ path: 'myModule', loadChildren: () => import( './myModule/my.module' ).then( m => m.MyModule ) }