Angular nx - 在另一个应用程序中调用应用程序

Question

我创建了一个项目 angular nx，其中包含 3 个应用程序，如下所示

apps
--convention
--network
--core
libs
tools

在核心应用程序中，我有一个侧边栏，我想在核心应用程序中调用约定和网络应用程序，以便在单击侧边栏中的链接时调用其中一个应用程序

“约定”不是已知元素：

core.component.ts

@Component({
  selector: 'webapp-root',
  templateUrl: './core.component.html'
})
export class CoreComponent {
  
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
     const component = createCustomElement(ConventionComponent, { injector: this.injector });
     customElements.define('convention', component);
  }

}

核心组件.html

<convention></convention>

Answer 1

您实际上使用了错误的方式来构建自定义元素。

如果您想将约定构建为自定义元素，您应该在约定应用程序中的app.module.ts调用您的ngDoBootstrap() 。 然后将其构建为自定义元素。

您的约定app.module.ts应该与此类似。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
// your other imports here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
   //...other modules
  ],
  // Enable bootstrap array only for development of
  // the Angular CLI todo list part alone.
  // bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    const element = createCustomElement(ConventionComponent, { injector: this.injector });
    customElements.define('convention', element);
  }
}

然后在不散列的情况下构建您的应用程序并在您的核心应用程序中导入包。