Question

我用以下3个应用程序创建了一个angular nx项目

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);
  }

}

core.component.html

<convention></convention>

Answer 1

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

如果您希望将约定构建为自定义元素，则应在约定应用中的ngDoBootstrap()内调用app.module.ts。然后将其构建为自定义元素。

您的约定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);
  }
}

然后在不进行哈希处理的情况下构建您的应用程序，并将捆绑包导入您的核心应用程序中。

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

1 个答案: