Angular CLI настраиваемый веб-пакет конфигурации

В предыдущих версиях Angular была опция eject, чтобы вы могли изменять конфигурацию вашего веб-пакета по своему усмотрению.
Одним из наиболее распространенных вариантов использования этой функции было добавление пользовательских загрузчиков веб-пакетов.

В Angular 6 эта опция была удалена, поэтому в настоящее время нет буквального способа получить конфигурацию веб-пакета (кроме поиска ее в угловом исходном коде).

Есть ли способ добавить пользовательскую конфигурацию веб-пакета в приложение Angular, которое использует @angular/cli 6+? Или, альтернативно, есть ли способ "извлечь" конфигурацию веб-пакета, которую использует Angular CLI под капотом?

Ответы

Ответ 1

Отказ от ответственности: я являюсь владельцем библиотеки ниже

Вы можете использовать библиотеку angular-builders, которая позволяет расширять существующие цели browser и server с помощью пользовательской конфигурации веб-пакета.

Использование довольно просто:

  1. Установите библиотеку: npm i -D @angular-builders/custom-webpack

  2. Измените ваш angular.json:

    "architect": {
   ...
   "build": {
       "builder": "@angular-builders/custom-webpack:browser"
       "options": {
              "customWebpackConfig": {
                 "path": "./extra-webpack.config.js",
                 "replaceDuplicatePlugins": true
              },
              "outputPath": "dist/my-cool-library",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json"
              ...
       }
  3. Добавьте extra-webpack.config.js в корневой каталог вашего приложения
  4. Поместите дополнительную конфигурацию в extra-webpack.config.js (простая конфигурация веб-пакета)

Здесь вы можете найти пример, который добавляет node-loader в конфигурацию браузера.

Дальнейшее чтение:
Настройка сборки Angular CLI - альтернатива ng eject

Ответ 2

Для Angular 8 @angular-builders/dev-server:generic устарела и вместо него используется @angular-builders/custom-webpack:dev-server, источник: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD.

Кроме того, вам может потребоваться запустить npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected], если после миграции вы увидели следующую ошибку architect_1.createBuilder is not a function.