2

我们使用 v9 构建的 Angular 元素创建了一个 Web 组件。noop在ngZone引导模块时应用。

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    ngZone: 'noop'
  })

创建一个连接 core-js polyfills 和 webcomponents.js（按顺序）的脚本：

  • src/js/core-js/minified.js
  • node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js
  • node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js
  • es5 捆绑包

这样做的原因是：

  • 我们需要支持 IE11 (core-js polyfill)
  • 我们需要使用 shadow dom (webcomponents-bundle.js)

当将生成的 Web 组件脚本注入到使用 ZoneJS 运行的 Angular 7 应用程序中时。之后，所有更改检测都不再在应用程序上运行。Click 不起作用，Angular Lifecycle 钩子不会按预期触发（例如，它在更改路由时触发，因为 ApplicationRef.tick() 被调用globalZoneAwareCallback）。

我很难调试这个并知道根本原因。我最初在考虑我的 Angular 应用程序来订阅路由事件并触发tick(). https://github.com/angular/angular/issues/34150

但我想知道这个的根本原因。如果有人能提供见解，我将不胜感激。

4

1 回答 1

0

我们做了什么来修复：

  1. 降级到 Angular 7，因为我们的大多数应用程序都使用 Angular 7，并且如果 Web 组件是 Angular 9，则会出现 ZoneJS 冲突。
  2. 恢复到默认更改检测策略
  3. 将 ZoneJS 重新添加到 Web 组件
  4. 将 ngZone 设置恢复为默认值，而不是noop
  5. 创建专用于 IE (es5) 的单独 javascript 构建，因为差异构建对于 Angular 7 仍然不可用。
  6. ViewEncapsulation 是为现代浏览器模拟 IE 和 ShadowDOM 的。
于 2020-08-11T06:15:15.757 回答