将多个角度元素用作角度项目中的腹板组件 [英] Using multiple angular elements as web components within an angular project
问题描述
使用v6.1.9给出三个@angular项目: host ， alpha 和 beta
Given three @angular projects all using v6.1.9: host, alpha, and beta
alpha 和 beta 分别使用@ angular/elements创建和定义一个Web组件:
alpha and beta create and define a web component each using @angular/elements as such:
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 .
alpha and beta are built using ng build --prod --output-hashing none and then a post build script is ran to concatenate the resulting files in the order of: scripts.js, styles.js, runtime.js, main.js.
polyfills.js被跳过是因为 main.ts 会在加载库时检查所使用的polyfills是否已经定义(例如，避免尝试重新定义zone.js).
polyfills.js is skipped because main.ts will check if the polyfills used are already defined when the library is loaded (to avoid trying to redefine zones.js for example).
生成的捆绑包是 alpha-component.bundle.js 和 beta-component.bundle.js .
host 在 index.html 的< head> 中引用了上述捆绑软件，并附带了< script defer> code>标签.
host references the above bundles in the <head> of index.html with <script defer> tags.
如果按照 alpha 然后是 beta 的顺序引用捆绑软件，我会看到 alpha 试图重新引导两次；以相反的顺序，我会看到 beta 尝试两次引导.
If the bundles are referenced in the order of alpha then beta, I will see alpha trying to bootstrap twice; In the reverse order, I will see beta trying to bootstrap twice.
由于第一个引用的捆绑软件尝试引导两次，因此它尝试为捆绑软件定义两次Web组件，从而导致错误，并且从不注册第二个引用的捆绑软件的Web组件.
Since the first referenced bundle attempts to bootstrap twice, it attempts to define the web component for the bundle twice, causing an error, and never registering the second referenced bundle's web component.
目标是能够使用@angular创建许多Web组件，然后在其他@angular或此处插入框架技术中使用它们.
The goal is to be able to create many web components using @angular and then consuming them within other @angular or insert framework here technologies.
推荐答案
不幸的是，捆绑打包在这里不起作用，b/c webpack正在使用全局变量.由alpha-bundle创建的变量将被beta-bundle的变量覆盖.
unfortunatelly, concatination of bundles does not work here, b/c webpack is using a global variable. The variable created by the alpha-bundle would be overwritten by the variable of the beta-bundle.
您可以在分发包中重命名此变量，也可以使用[1]，它是-单捆开关.
You could rename this variable in the bundles or you could go with [1] and it's --single-bundle switch.
要开始使用，请忽略自述文件中有关外部的内容.这是进一步的优化技术，主机，alpha和beta可以共享相同的库.这样可以防止您多次加载Angular.
To get started, forget about what the readme says about externals. This is an further optimization technqiue, where the host, alpha and beta could share the same libs. This prevents you from loading Angular several times.
Perhaps, also my blog series about Angular Elements is interesting for you [2].
最良好的祝愿，曼弗雷德(Manfred)
Best wishes, Manfred
[1] https://github.com/manfredsteyer/ngx-build-plus
[2] 查看全文
