Angular. Отличие baseHref от deployUrl

  • deployUrl - задаёт путь для статических (js, css) файлов в index.html.
  • baseHref - определяет base, используется в ссылках и маршрутизации (routing) Angular

angular.json

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "outputPath": "dist/<app-name>",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "baseHref": "/base-href/",   <===
            "deployUrl": "/deploy/",     <===
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Awesome App</title>
    <base href="/base-href/" />                              <!-- baseHref -->           
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="/deploy/styles.css" />      <!-- deployUrl -->
  </head>
  <body>
    <app-root></app-root>
    <script src="/deploy/runtime.js" defer></script>         <!-- deployUrl -->
    <script src="/deploy/polyfills.js" defer></script>       <!-- deployUrl -->
    <script src="/deploy/vendor.js" defer></script>          <!-- deployUrl -->
    <script src="/deploy/main.js" defer></script>            <!-- deployUrl -->
  </body>
</html>

Относительные ссылки браузер склеит с baseHref

<img src="./assets/rocket.svg" /> <!-- относительная, будет запрашивать /base-href/assets/rocket.svg  -->
<img src="/assets/rocket.svg" />  <!-- абсолютная, будет запрашивать /assets/rocket.svg -->
<img src="assets/rocket.svg" />   <!-- относительная, будет запрашивать /base-href/assets/rocket.svg -->

Похожие записи

Angular routerLink conditionally

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>
02 сентября 2019 г. в Angular