sel*_*ohn 5 web-component zone.js angular angular-elements angular8
我使用角度自定义元素功能（element.js）创建了一个小应用程序，将那个element.js文件导入到index.html中的另一个angular（parent）应用程序中，在开发服务器（ng serve）元素功能正常，但是在生产模式下（ng build --prod）在element.js文件中得到此错误。
@ angular / core“：”〜8.1.3“，@ angular / elements”：“ ^ 8.1.3”
element (angular custom element code)
polyfills.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
app.module.ts
export class AppModule {
constructor(private injector: Injector) { }
ngDoBootstrap() {
const el = createCustomElement(NotificationElementComponent, {
injector: this.injector
});
// using built in the browser to create your own custome element name
customElements.define('test-card', el);
}
}
angular (parent app)
index.html
<!doctype html>
<html lang="en">
<body>
<app-root></app-root>
<script src="./assets/elements.js"></script>
</body>
</html>
polyfills.ts
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone'; // Included with Angular CLI.
(window as any).global = window;
app.component.html
<test-card [data]="{id:"foo"}"></test-card>
错误Zone.js检测到ZoneAwarePromise (window|global).Promise已被覆盖。最可能的原因是在Zone.js之后加载了Promise polyfill（加载zone.js时不需要填充Promise api。如果必须加载，则在加载zone.js之前执行。）。
为了让您省去很多麻烦，建议在使用 Angular Elements 时删除 Zone 并自行处理更改检测。
platformBrowserDynamic()
.bootstrapModule(MainModule, { ngZone: 'noop'})
.catch(err => console.error(err));
然后确保将其从 PolyFill 中移除。
| 归档时间： |
|
| 查看次数： |
896 次 |
| 最近记录： |