4

给定三个使用 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<script defer>

alpha如果捆绑包是按then的顺序引用的beta，我会看到alpha尝试引导两次；以相反的顺序，我会看到beta尝试引导两次。

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

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

4

3 回答 3

5

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

您可以在捆绑包中重命名此变量，或者您可以使用 [1] 并且它是 --single-bundle 开关。

首先，忘记自述文件中关于外部的内容。这是进一步的优化技术，主机、alpha 和 beta 可以共享相同的库。这可以防止您多次加载 Angular。

也许，我关于 Angular Elements 的博客系列对您来说也很有趣 [2]。

最好的祝愿，曼弗雷德

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

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

于 2018-10-23T19:42:44.497 回答
1

我使用 angular custom builder 使用 angular builder 的自定义 webpack 配置来导出具有唯一命名空间的构建的 angular bundle。

  1. 安装@angular-builders/custom-webpack包

  2. 创建自定义 webpack 配置文件。例如。额外的 webpack.config.js。

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

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

注意：这些属性是根据 Angular 12+ 中使用的 webpack 5。请参阅 webpack 文档以了解旧版本的 webpack。

  1. 使用@angular-builders/custom-webpack代替@angular-devkit/build-angular作为构建器，并在angular.json中添加customWebpackConfig对象。
"builder": "@angular-builders/custom-webpack:browser",
    .....
    "customWebpackConfig": {
       "path": "extra-webpack.config.js",
        "mergeStrategies": {
           "externals": "prepend"
         }
     }
  1. 现在，当您运行 ng build 时，您的应用程序将使用带有自定义 webpack 配置的自定义构建器构建。导出为 Web 组件和多个 Web 组件的其他应用程序的类似配置可以在同一个容器应用程序中使用，而不会出现任何错误或命名空间冲突/污染。
于 2021-06-01T12:46:41.360 回答
0

我使用Manfred Steyer的建议并且它有效，所以我将在这里通过提供更详细的工作示例来开发他的答案（基于我的案例 - Angular 8，我在 MacOs 上做）：

在您的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键中scripts添加/编辑键：

"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"

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

npm run build:alpha:externals

这将创建文件dist/alpha.js- 以与您构建相同的方式beta.js（在 beta 项目中） - 并且host您可以将两者都添加到您index.html的 by

<head>
...
  <script src="./assets/web-components/alpha.js" type="text/javascript"></script>
  <script src="./assets/web-components/beta.js" type="text/javascript"></script>
...
</head>

两者都应该同时工作

于 2020-12-08T20:38:48.287 回答