Question

我们有两个有角度的Micro UI示例App1和App2。两者都可以独立加载，也可以在其他Angular应用程序中独立访问。

这些2 Micro UI在父应用程序中被引用。

我正在尝试访问App1微型UI中的App2微型UI。但是，当引用App2角度元素标签时，App2不会启动。

我希望将App2加载到App1中，并且它们都是web组件，而我要使用简单的index.html文件加载App1，并同时为两个应用程序都包含js

js文件是使用jscat创建的，并包含main.ts，runtime.ts和polyfills.ts文件。

下面是代码段。

父母申请

index.html

<script src="appone.js" type="text/javascript"></script>
<script src="apptwo.js" type="text/javascript"></script>
<app-one></app-one>

App1

app.module.ts

@NgModule({
.....
....

entryComponents: [AppOneComponent]
export class AppModule { 
  constructor(private injector: Injector) {
  }

   ngDoBootstrap() {
    const el1 = createCustomElement(AppOneComponent, { injector: this.injector });
     customElements.define('app-one', el1);
   }

app.component.html

<app-two></app-two>

App2

app.module.ts

@NgModule({
.....
....

entryComponents: [AppTwoComponent]
export class AppModule { 
  constructor(private injector: Injector) {
  }

   ngDoBootstrap() {
    const el1 = createCustomElement(AppTwoComponent, { injector: this.injector });
     customElements.define('app-two', el1);
}

app.compnent.html

<div>Loaded App 2 </div>

app.comp.ts

@Component({
  selector: 'app-two',
  templateUrl: './app.compnent.html',
})
export class AppTwoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  console.log("App2 Loaded");
  }

}

标签正在开发人员工具中加载，但是未显示App2的内容。

我正在使用角度8，有人在其他角度元素内调用角度元素进行过POC吗？

在另一个Angular Web组件内部使用Angular Web组件

0 个答案: