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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

@Directive v/s @Component in Angular

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

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

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

14 сентября 2019 г. в Angular

Вставить <script> в Angular компонент

Добавление сторонних скриптов в Angular по запросу. Как известно, добавить скрипт через шаблон невозможно. Представлено решение как это сделать программно.