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

Question

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

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

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

Answer 1

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

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

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

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 (простая конфигурация webpack)

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

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

Answer 2

Для угловых 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/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest если после миграции вы бы увидели следующую ошибку architect_1.createBuilder is not a function,