Question

是否可以使用从不同脚本生成的Angular Elements？

我有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

当前不支持，该功能可在同一页面上具有多个角度微型应用程序。

您看到的错误实际上很好地描述了该问题。当您加载第二个微型应用程序时，引导程序将运行并尝试通过调用其ngDoBootstrap方法来引导模块。但是，如果您进行一些详细的日志记录，您会注意到它尝试第二次在第一个微型应用程序上调用ngDoBootstrap。如果要进行此工作，则需要做一些手动工作来自己控制引导过程，并确保在页面上引入正确的模块后进行引导。

Resource

Answer 2

默认情况下，Webpack的分发资产的构建会分配window.webpackJsonp变量，但是如果将多个Elements打包在一起，则在解析分发包时，将分配此变量并使用现有代码运行。

您可以通过在捆绑进程中为该变量指定一个更唯一的名称来修补补丁。我只是将Element名称添加到webpackJsonp的名称中，从而解决了此问题。

Answer 3

只需更新此内容，以便其他用户找到解决方案。现在可以使用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.ts文件中添加/删除polyfill，并添加/删除custom-elements-es5-adapter.js which you can pull from here

Answer 4

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

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

4 个答案: