具有 Angular 7 - Zone.js 和自定义元素问题的微型应用程序

Question

我在开发 Angular (7) 方面还很陌生，因为我在考虑新的大型 Web 项目的架构。所以我尝试了一些可能的选项，尤其是使用微前端。

我创建了两个 angular 项目 -> "micro-app-shell" 和 "micro-app-a".

shell是Web应用的外层容器，管理着多个微应用。

我用 angular 阅读了一些关于微型应用程序的文章，想尝试自定义元素方法。

"micro-app-a"

"app.module.ts"

的摘录

@NgModule({
  declarations: [
    AppComponent,
    ClientAComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // bootstrap: [AppComponent]
  entryComponents: [
    ClientAComponent,
  ]
})
export class AppModule {

  constructor(private injector: Injector) {

  }

  ngDoBootstrap() {
    const appElement = createCustomElement(ClientAComponent, { injector: this.injector });
    customElements.define('client-a', appElement);
  }

}

"app.component.html"

<div style="text-align:center">
  <h1>
    Client A Micro App
  </h1>
</div>

我使用以下命令构建应用程序：

ng build --output-hashing none --output-path C:/Dev/mdo_workspace/micro-app-test/micro-app-shell/src/assets/scripts

"micro-app-shell"

我在 index.html

中添加了以下内容

 <script type="text/javascript" src="./assets/scripts/runtime.js"></script>
  <script type="text/javascript" src="./assets/scripts/polyfills.js"></script>
  <script type="text/javascript" src="./assets/scripts/styles.js"></script>
  <script type="text/javascript" src="./assets/scripts/vendor.js"></script>
  <script type="text/javascript" src="./assets/scripts/main.js"></script>

我用模式部分 app.module.ts 扩展

schemas: [CUSTOM_ELEMENTS_SCHEMA],

现在我的questions/issues

1 a) 当我在 "micro-app-a" -> polyfills.js 中取消注释时 zone.js import (import 'zone.js/dist/zone'; )和运行 "micro-app-shell" 我得到错误

Zone already loaded.

1 b) 当我在 "micro-app-a" -> polyfills.js 中评论 zone.js 导入时（导入 'zone.js/dist/zone'; ）运行 "micro-app-shell" 我得到了错误

In this configuration Angular requires Zone.js

防止这种错误的正确方法是什么？或者我可以忽略它吗？

2) 当我应用问题 1a 的更改并启动 "micro-app-shell" 我想显示 "micro-app-a" 作为 app.comment.html 中的自定义元素，如下所示：

<div>
  <client-a></client-a>
</div>

"micro-app-shell" - "app.component.html" 的内容已显示，但出现错误：

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

我关注这样的样本：

https://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx https://www.ngdevelop.tech/angular-elements/

非常感谢您的提前帮助！

Answer 1

你在这里查看我的示例项目 https://github.com/xmlking/angular-elements-in-angular-shell 我仍在计划改善开发者体验

Answer 2

此问题已在最新版本zone.js0.8.28中修复，请查看

Answer 3

上面的例子看起来应该可行。我也遇到了同样的错误，看起来有一些浏览器支持问题。通过添加 @webcomponents/custom-elements

我能够让一切正常工作

npm install @webcomponents/custom-elements

然后在polyfills.ts

末尾添加以下内容

// Used for browsers with partially native support of Custom Elements
import '@webcomponents/custom-elements/src/native-shim';

// Used for browsers without a native support of Custom Elements
import '@webcomponents/custom-elements/custom-elements.min';

具有 Angular 7 - Zone.js 和自定义元素问题的微型应用程序

Micro apps with Angular 7 - Zone.js and custom elements issues

microservices

zone.js

angular