Начиная с Angular 6, команда Angular разработала новую функцию, позволяющую создавать несколько проектов в одном рабочем пространстве с помощью angular-cli, и конфигурация будет обновлена в angular.json соответственно. Это одна из лучших функций, которая поставляется «из коробки», если в процессе разработки участвует несколько небольших команд. Будет очень легко настраивать зависимости, и вы можете либо создавать и размещать свое приложение самостоятельно, либо без особых хлопот интегрировать его в родительское приложение.
В случае, если вы хотите запустить два или более независимых угловых приложения в одном окне браузера по каким-либо причинам (например, Micro Front End), это не будет работать так, как мы ожидаем. В любой момент времени только один экземпляр angular будет создан по умолчанию при сборке angular webpack. Мы можем запускать несколько экземпляров angular в одном окне браузера, внеся небольшие изменения в angular.json.
До Angular 5 у нас была возможность использовать нашу пользовательскую конфигурацию веб-пакета с помощью параметра ng eject. Поскольку Angular 6 устарел, я искал лучший способ использовать конфигурацию custom-webpack для своих проектов. Наконец я нашел гораздо более простой способ, чем ng eject.
Используйте собственные сборщики angular webpack вместо сборщиков angular devkit по умолчанию.
Используя этот подход (применимо для Angular6 и более поздних версий), мы можем добавить дополнительные функции веб-пакета вместе с существующими конфигурациями angular.json.
- Добавьте @angular-builders/custom-webpackкак часть зависимостей разработчика в package.json. (Выберите версию пакета 6/7/8 в соответствии с вашей угловой версией)
npm i @angular-builders/custom-webpack -D
2. Теперь перейдите в angular.jsonи измените имя построителя вместе с дополнительными параметрами конфигурации веб-пакета.
"architect": {
"build": {
// Here you include custom builders instead of angular devkit //builder
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js", // relative path
"replaceDuplicatePlugins": false,
"mergeStrategies": {
"optimization": "replace"
// This is important as we should replace default property
}
}
"outputPath": "dist/app-one"
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.browser.json",
"aot": true,
...
}
}
}
3. Создайте extra-webpack.config.js в своем корневом каталоге и добавьте приведенный ниже код.
module.exports = {
optimization: {
runtimeChunk: false
// This will make sure that we can run multiple instances of angular
},
output: {
library: 'uniqueAppName'
// since we are dealing with multiple angular projects, library name // is mandatory if you are trying to implement lazy load as well
}
}
Вот и все. Мы сделали. Если вы хотите добавить/создать новые подключаемые модули веб-пакета, вы можете продолжать добавлять их как часть этой конфигурации (например, подключаемый модуль веб-пакета для удаления инструкций console.log из рабочей сборки). )
