我有以下问题.我有一个使用Angular 6和路由系统构建的应用程序.我想创建一个包含此应用程序的Web组件,并能够将其用作不同Web应用程序的一部分.我已按照本教程操作,并根据自己的需要对其进行了修改:https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

结果是屏幕上没有任何渲染,现在浏览器中存在错误Error: The selector "app-root" did not match any elements.

在浏览器源文件上,我可以确认包含我的Web组件的js文件已成功加载.

这是我有的:

在app.module.ts中

@NgModule({
  declarations: [
    AppComponent,
    VideoRoomComponent,
    DashboardComponent,
    StreamComponent,
    DialogNicknameComponent,
    ChatComponent,
    DialogExtensionComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatDialogModule,
    MatTooltipModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  entryComponents: [
    AppComponent,
    DialogNicknameComponent,
    DialogExtensionComponent,
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('myElement', el);
  }
}

在这里,我的index.html来测试自定义元素

   




  
  
  



  
Hello, World!
      

有关这个问题的任何建议？

提前致谢

尝试使用而不是.同时调整你的customElements.define电话customElements.define('my-element', el);.如果我没有弄错,要将自定义元素与本机浏览器元素分开,每个自定义元素都必须至少有一个短划线.HTML不区分大小写.