Search code examples
angularangular-cli

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

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