What's the difference between --base-href and --deploy-url parameters of angular-cli tool
AngularAngular CliAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
- Base-href is being used by routing
- deploy-url is for assets.
In most cases base-href is enough.
Please see these posts:
Solution 2 - Angular
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 - Angular
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 - Angular
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/
.