Загрузка нескольких элементов Angular в одном окне
Что может пойти не так при попытке последовательно открыть микроприложения в одном окне?
У нас есть этот вариант использования, который нам нужен для поддержки нашего проекта, который требует, чтобы хост-система загружала первое микро-приложение с элементом angular вместе со всеми его зависимостями (файлы .js), а затем позволяла загружать другое микро-приложение с тем же подходом. Казалось, что это очень легко сделать, но мы столкнулись с проблемами, когда начали внедрять этот подход.
Первое микроприложение загрузилось без проблем. Однако по какой-то причине второе микроприложение не было обработано, хотя мы ясно видим, что все зависимости (файлы .js) были загружены внутри браузера. Мы даже не увидели ошибок в консоли браузера, поэтому не могли понять, в чем проблема. Потратив несколько часов на анализ кода, я наконец понял, в чем проблема.
Проблема:
Оказывается, мы столкнулись с проблемой с глобальной переменной «webpackJsonp» при загрузке нескольких угловых элементов из разных микро-приложений. Когда мы загрузили первый элемент angular, он создал переменную webpackJsonp внутри объекта окна. Второе микроприложение должно было переопределить содержимое первого микроприложения, объявленное в этой переменной, но этого не произошло, и все это было из-за простой проблемы - оба микроприложения использовали одно и то же имя переменной!
Решение:
Чтобы избежать конфликта, нам просто пришлось переопределить имя переменной по умолчанию «webpackJsonp» некоторым уникальным именем переменной, специфичным для приложения или элемента angular. Выполните следующие шаги, чтобы реализовать решение.
- Установите custom-webpack из модуля angular-builders
npm i -D @angular-builders/custom-webpack
2. Внесите следующие изменения в angular.json.
- измените свойство builder на @ angular-builders / custom-webpack: browser.
- добавьте свойство customWebpackConfig, как показано ниже.
"architect”: {
“build”: {
“builder”: “@angular-builders/custom-webpack:browser”,
“options”: {
“customWebpackConfig”: { “path”: “./extra-webpack.config.js”,
“mergeStrategies”: { “externals”: “replace” } }
3. Создайте файл конфигурации «extra-webpack.config.js» в корневой папке проекта с приведенным ниже содержимым.
- jsonpFunction - дать уникальное имя, которое характерно для элемента angular или microapp
- библиотека - укажите имя приложения или угловой элемент
module.exports = {
output: {
jsonpFunction: ‘webpackJsonpAppname’,
library: ‘appname’
}
};
4. При сборке проекта вы увидите содержимое main.js, как показано ниже. Переменная webpackJsonP будет заменена именем, указанным в вашем файле конфигурации «extra-webpack.config.js».
var appname=(window.webpackJsonpAppname=window.webpackJsonpAppname||[])..........
5. Когда вы импортируете этот файл, не будет никаких конфликтов с другими микроприложениями, поскольку мы переименовали глобальную переменную в специфичную для микроприложения. При таком подходе мы можем успешно загрузить более одного углового микро-приложения в одно окно.
