Issue
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
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_BASE_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/
.
Answered By - ahong
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.