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

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

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular