Как добавить ссылку на сгенерированные стили. [Hash] .css файл в Angular 7 - PullRequest
Новая
       15

Как добавить ссылку на сгенерированные стили. [Hash] .css файл в Angular 7

0 голосов
/ 03 мая 2019

У меня есть проект Angular 7, который генерирует стили. [Hash] .css файл в сборке prod.

У меня есть iframe в одном из моих компонентов, который загружает статический html-файл, определенный в том же проекте (не угловой компонент, просто обычный статический html).

Я хочу повторно использовать стили моего проекта в моем статическом html-файле, который загружается в iframe. Есть ли способ узнать имя файла styles.css, который генерируется в папке dist в качестве вывода сборки prod?

Я создаю prod build, используя ng build --aot --prod --stats-json

При этом создается файл stats.json с именами файлов в поле assetsByChunkName. 

"assetsByChunkName": {
        "runtime": "runtime.b2ebd3cc7f73d5966db1.js",
        "main": "main.9872f510320bbf1b0ad9.js",
        "polyfills": "polyfills.b2e1d6dfcc48e480634c.js",
        "styles": "styles.4bd3b6df7eaeb9129b4d.css"
    }

Есть ли чистый способ (может быть с использованием плагина), чтобы добавить следующую строку в HTML-файл моего iframe, как <link rel="stylesheet" href="styles.4bd3b6df7eaeb9129b4d.css">?

Ищите решение, которое будет работать как в ng serve, так и в сборке prod angular-cli

Примечание: я хочу сохранить хэш в файлах prod для его преимуществ

1 Ответ

0 голосов
/ 03 мая 2019

Добавить "outputHashing": "none", в angular.json

, это удалит 4bd3b6df7eaeb9129b4d из style.css, документация 

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "none", // here
      "sourceMap": true,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ]
    }
...