Несколько угловых элементов из разных скриптов

Question

Можно ли использовать Угловые элементы , сгенерированные из разных сценариев?

У меня есть 2 проекта-виджет погоды и виджет часов, которые генерируют свои собственные сценарии (объединяющие все необходимые).

Когда я использую эти виджеты по отдельности, они работают нормально, но когда они используются на той же странице, выдает ошибку, показанную ниже:

DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at CustomElementRegistry.define (http://172.27.147.64:8080/node_modules/document-register-element/build/document-register-element.js:2:18538)
at new AppModule (http://172.27.147.64:8080/dist/weather-widget/main.js:115:24)

Answer 1

Просто чтобы обновить это, чтобы другие пользователи нашли решение.Теперь это возможно с помощью Angular Custom Webpack Builder .

В angular.json

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./apps/custom-elements/extra-webpack.config.js",
              "mergeStrategies": { "externals": "replace" }
            },
            ...

И в файле extra-webpack.config.js добавьте что-то вродеэто:

module.exports = {
  output: {
    jsonpFunction: 'webpackJsonpElements',
    library: 'elements',
  },
}

Если это все еще не работает, попробуйте добавить / удалить polyfills из файла Polyfills.ts и добавить / удалить custom-elements-es5-adapter.js который вы можете вытащить отсюда

Answer 2

Возможность иметь несколько угловых микро-приложений на одной странице в настоящее время не поддерживается .

Ошибка, которую вы видите, на самом деле хорошо описывает проблему.Когда вы загрузите ваше второе микро-приложение, загрузчик запустится и попытается загрузить модуль, вызвав его метод ngDoBootstrap.Если вы сделаете некоторые подробные записи в журнал, вы заметите, что он пытается вызвать ngDoBootstrap в первом микро-приложении во второй раз.Если вы хотите выполнить эту работу, вам нужно будет выполнить некоторую ручную работу, чтобы самостоятельно контролировать процесс начальной загрузки и убедиться в том, что при запуске он представлен на странице правильно, правильно загружая модуль.*

Answer 3

Построение веб-пакета ресурсов распределения по умолчанию назначает переменную window.webpackJsonp, однако с несколькими элементами, упакованными таким образом, вы будете, когда он анализирует пакет, эта переменная уже назначена и выполняется с существующим кодом.

Вы можете исправить это, присвоив этой переменной в вашем пакете более уникальное имя.Я просто добавил имя элемента к имени webpackJsonp, что решило эту проблему.

Answer 4

Используйте уникальное имя тега для определения вашего углового элемента.Это должно предотвратить эту проблему.