Angular 7 - обнаружение изменений не работает с пользовательской конфигурацией ngx-build-plus

Question

Я использую ngx-build-plus для настройки процесса сборки для моего приложения Angular 7.
Я добавил webpack.partial.js файл со следующим кодом:

const webpack = require('webpack');

module.exports = {
  output: {
    jsonpFunction: 'header'
  },
  plugins: [
    new webpack.ProvidePlugin({
      Promise: 'es6-promise'
    })
  ]
}

Для запуска приложения я использую следующую команду:

ng serve --extra-webpack-config webpack.extra.js -o

А вот мой angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "header": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "ngx-build-plus:build",
          "options": {
            "outputPath": "dist/header",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/scss/bootstrap.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",  
              "node_modules/popper.js/dist/umd/popper.min.js",  
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "en": {
              "aot": true,
              "i18nFile": "src/translate/messages.en.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            },
            "fr": {
              "aot": true,
              "i18nFile": "src/translate/messages.fr.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "fr",
              "i18nMissingTranslation": "error"
            }
          }
        },
        "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "header:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "header:build:production"
            },
            "en": {
              "browserTarget": "header:build:en"
            },
            "fr": {
              "browserTarget": "header:build:fr"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "header:build"
          }
        },

      }
    },

  },
  "defaultProject": "header",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Приложение работает абсолютно нормально, если я запускаю приложение без пользовательской конфигурации следующим образом:

ng serve

НО, когда я запускаю приложение с пользовательской конфигурацией веб-пакета, обнаружение изменений не работает должным образом.Переменная, обновленная в классе компонента, не обновляется в шаблоне / представлении.

Что не так при использовании webpack.partial.js

Answer 1

Чтобы использовать пользовательскую конфигурацию веб-пакета, нам понадобится зависимость @ angular-builders / custom-webpack.Добавьте его в свой проект как devDependency следующим образом:

$ npm i @angular-builders/custom-webpack -D

Затем мы можем установить момент в наш проект и импортировать его в наш проект:

$ npm i moment --save

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

Внутри корня вашего проекта создайте новый файл с именем custom-webpack.config.js со следующим:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
 plugins: [
  new MomentLocalesPlugin({
   localesToKeep: ['fr']
  })
 ]
};

Для этого нам необходимо установить момент-locales-webpack-plugin:

$ npm i moment-locales-webpack-plugin -D

После этого нам нужно настроить angular.json для использования этой новой конфигурации.Внутри объекта architect / build обновите конструктор из @ angular-devkit / build-angular: browser до @ angular-builders / custom-webpack: browser и добавьте ключ customWebpackConfig:

"architect": {
 "build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
   "customWebpackConfig": {
    "path": "./custom-webpack.config.js",
    "replaceDuplicatePlugins": true
   }
  }
 }
}

Этовсе, что нам нужно сделать, если мы хотим, чтобы наше окончательное, построенное приложение использовало конфигурацию webpack.Однако, если мы хотим протестировать эту конфигурацию при использовании ng serve, нам нужно сделать еще одну вещь.

Установить пользовательский веб-сервер @ angular-builders / dev-server изнутри npm:

$ npm i @angular-builders/dev-server -D

Затем мы можем обновить это внутри serve / builder в файле angular.json:

"serve": {
 "builder": "@angular-builders/custom-webpack:dev-server"
}