Question

使用v6.1.9给出三个@angular项目：host，alpha和beta

alpha和beta分别使用@ angular / elements创建和定义一个Web组件：

constructor(private injector: Injector) {}

ngDoBootstrap() {
  const config: NgElementConfig = { injector: this.injector };
  const component= createCustomElement(component, config);
  customElements.define("alpha-component", component); // beta-component respectively
}

alpha和beta使用ng build --prod --output-hashing none构建，然后运行后构建脚本以按以下顺序连接生成的文件：scripts.js, styles.js, runtime.js, main.js。

polyfills.js被跳过是因为main.ts将在加载库时检查所使用的polyfills是否已经定义（例如，避免尝试重新定义zone.js）。

生成的包为alpha-component.bundle.js和beta-component.bundle.js。

host使用<head>标签引用了index.html的{{1}}中的上述捆绑软件。

如果按照<script defer>然后alpha的顺序引用分发包，我将看到beta尝试进行两次引导；以相反的顺序，我将看到alpha尝试两次引导。

由于第一个引用的捆绑软件尝试引导两次，因此它尝试为捆绑软件定义两次Web组件，从而导致错误，并且从不注册第二个引用的捆绑软件的Web组件。

目标是能够使用@angular创建许多Web组件，然后在其他@angular或beta技术中使用它们。

Answer 1

不幸的是，捆绑的打包在这里不起作用，b / c webpack使用的是全局变量。由alpha-bundle创建的变量将被beta-bundle的变量覆盖。

您可以在分发包中重命名此变量，也可以使用[1]，它是-单捆开关。

要开始使用，请忽略自述文件中有关外部的内容。这是进一步的优化技术，主机，alpha和beta可以共享相同的库。这样可以防止您多次加载Angular。

也许，我的blog series about Angular Elements对您来说也很有趣[2]。

最良好的祝愿，曼弗雷德

[1] https://github.com/manfredsteyer/ngx-build-plus

[2] https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx

Answer 2

我使用Manfred Steyer的建议，并且它起作用了，因此我将在这里给出更详细的工作示例（根据我的情况-Angular 8，我在MacO上做），在此回答他：

在您的alpha网络组件（这是单独的有角项目<alpha>）上，运行以下命令

npm install ngx-build-plus -S
ng update ngx-build-plus --force
ng add ngx-build-plus
ng g ngx-build-plus:wc-polyfill
ng g ngx-build-plus:externals

（这将在您的主项目目录中创建文件webpack.externals.js，然后在密钥package.json的{{1}}中添加/编辑密钥：

scripts

现在我通过以下方式构建Web组件：

"build:alpha:externals": "ng build --output-hashing none --extra-webpack-config webpack.externals.js --prod --single-bundle true --project alpha && cat dist/alpha/polyfill-webcomp-es5.js dist/alpha/polyfills-es5.js dist/alpha/scripts.js dist/alpha/main-es5.js > dist/alpha.js"

这将创建文件npm run build:alpha:externals-以与您构建dist/alpha.js相同的方式（在beta项目中）-在beta.js中，您可以通过< / p>

host

并且两者应该同时工作

Answer 3

我使用 angular 自定义构建器导出构建的具有唯一命名空间的 angular 包，使用 angular 构建器的自定义 webpack 配置。

安装@angular-builders/custom-webpack 包

创建自定义 webpack 配置文件。例如。 extra-webpack.config.js.

module.exports = {
output: {
    chunkLoadingGlobal: 'webpackChunkModuleName',
    library: 'ModuleName'
}

为 chunkLoadingGlobal 和库提供您的应用程序名称或任何唯一名称。

注意：这些属性与用于 angular 12+ 的 webpack 5 相同。有关旧版本的 webpack，请参阅 webpack 文档。

使用 @angular-builders/custom-webpack 作为你的构建器来代替 @angular-devkit/build-angular 并添加 customWebpackConfig angular.json 中的对象。

<块引用>

"builder": "@angular-builders/custom-webpack:browser",
    .....
    "customWebpackConfig": {
       "path": "extra-webpack.config.js",
        "mergeStrategies": {
           "externals": "prepend"
         }
     }

现在，当您运行 ng build 时，您的应用程序将使用具有自定义 webpack 配置的自定义构建器构建。导出为 Web 组件的其他应用程序的类似配置，并且多个 Web 组件可以在同一个容器应用程序中使用，而不会出现任何错误或命名空间冲突/污染。

将多个角度元素用作角度项目中的腹板组件

3 个答案: