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

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

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