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.