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

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

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента