来自不同脚本的多个Angular元素

Question

是否可以使用从不同脚本生成的qazxsw poi？

我有2个项目weather-widget和clock widget，它们生成自己的脚本（concat所有必需的脚本）。

当我单独使用这些小部件时它工作正常，但当它们在同一页面上使用时，它会显示如下错误：

Angular Elements

Answer 1

目前不支持在同一页面上具有多个角度微应用程序的功能。

您看到的错误实际上很好地描述了该问题。当你加载你的第二个微应用程序时，bootstrap将运行并尝试通过调用它的

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)

方法来引导模块。如果你做了一些详细的日志记录，你会发现它试图第二次在第一个微应用程序上调用ngDoBootstrap。如果您想使这项工作，您需要做一些手动工作来自己控制引导过程，并确保在页面上引入正确的模块时引导它。

ngDoBootstrap

Answer 2

构建分发资产webpack默认情况下会分配window.webpackJsonp变量，但是当多个Elements包含这种方式时，您将在分析此变量时分配该变量并使用现有代码运行。

您可以通过在捆绑过程中为此变量提供更独特的名称来修补补丁。我刚刚将元素名称添加到webpackJsonp的名称，这解决了这个问题。

Answer 3

只是为了更新这个，以便其他用户找到解决方案。现在可以使用Resource。

在angular.json中

Angular Custom Webpack Builder

在extra-webpack.config.js文件中添加如下内容：

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

如果仍然无效，可以从Polyfills.ts文件添加/删除polyfill并添加/删除custom-elements-es5-adapter.js

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

Answer 4

使用唯一标记名称来定义Angular元素。这应该可以防止这个问题。