Angular 使用6个web组件_Angular_Elements_Angular6_Angular Elements

Angular 使用6个web组件

angular angular6

Angular 使用6个web组件,angular,elements,angular6,angular-elements,Angular,Elements,Angular6,Angular Elements,我有以下问题。我有一个使用Angular 6和路由系统构建的应用程序。我想创建一个包含此应用程序的web组件，并能够将其作为其他web应用程序的一部分使用。我遵循了本教程，并根据需要对其进行了修改：结果是屏幕上没有呈现任何内容，现在浏览器中存在错误错误：选择器“app root”与任何元素都不匹配在浏览器源文件中，我可以确认包含web组件的js文件已成功加载以下是我所拥有的：在app.module.ts中 @NgModule({ declarations: [ AppComp

我有以下问题。我有一个使用Angular 6和路由系统构建的应用程序。我想创建一个包含此应用程序的web组件，并能够将其作为其他web应用程序的一部分使用。我遵循了本教程，并根据需要对其进行了修改：

结果是屏幕上没有呈现任何内容，现在浏览器中存在错误

错误：选择器“app root”与任何元素都不匹配
在浏览器源文件中，我可以确认包含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);
  }
}

在这里，使用my index.html测试自定义元素
   <!DOCTYPE html>
<html>

<head>

  <title>My webpage!</title>
  <script>
    var global = global || window;
  </script>
  <script type="text/javascript" src="myElement.js"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <myElement></myElement>    
</body>

</html>


我的网页！
var global=全局| |窗口；
你好，世界！

对这个问题有什么建议吗
提前感谢
尝试使用
而不是
。另外，调整customElements.define
调用customElements.define（'my-element'，el）。如果我没有弄错的话，要将自定义元素与本机浏览器元素分开，每个自定义元素都必须至少有一个破折号。HTML不区分大小写。
尝试使用
而不是
。另外，调整customElements.define
调用customElements.define（'my-element'，el）。如果我没有弄错的话，要将自定义元素与本机浏览器元素分开，每个自定义元素都必须至少有一个破折号。HTML不区分大小写。
在main.ts文件中应该是这样的
从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule，Injector}；
从'@angular/elements'导入{createCustomElement}；
从“./app.component”导入{AppComponent}；
@NGD模块({
入口组件：[
应用组件
],
声明：[
应用组件
],
进口：[
浏览器模块
],
提供者：[]
})
导出类AppModule{
构造函数（专用注入器：注入器）{
const firstComponent=createCustomElement（AppComponent，{injector}）；
customElements.define（'name-of-your-component'，firstComponent'）；
}
ngDoBootstrap（）{}
}

因此，基本上您必须在引导组件之前声明自定义元素
签出此文件以获取分步指南。
在main.ts文件中应该是这样的内容
从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule，Injector}；
从'@angular/elements'导入{createCustomElement}；
从“./app.component”导入{AppComponent}；
@NGD模块({
入口组件：[
应用组件
],
声明：[
应用组件
],
进口：[
浏览器模块
],
提供者：[]
})
导出类AppModule{
构造函数（专用注入器：注入器）{
const firstComponent=createCustomElement（AppComponent，{injector}）；
customElements.define（'name-of-your-component'，firstComponent'）；
}
ngDoBootstrap（）{}
}

因此，基本上您必须在引导组件之前声明自定义元素
请查看此逐步指南。
您应该在构建之前注释您的引导：[AppComponent]行，这样它就不会与您的自定义元素一起引导。
您应该在构建之前注释您的引导：[AppComponent]行，这样它就不会与您的自定义元素一起引导。
HTML应该是这样的
<!DOCTYPE html>
<html>
    <head>
        <title>My webpage!</title>
        <script>var global = global || window;</script>
        <script type="text/javascript" src="myElement.js"></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <my-element></my-element>    
    </body>
</html>

阅读更多信息。
HTML应该是这样的
<!DOCTYPE html>
<html>
    <head>
        <title>My webpage!</title>
        <script>var global = global || window;</script>
        <script type="text/javascript" src="myElement.js"></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <my-element></my-element>    
    </body>
</html>

阅读更多信息。
你能在StackBlitz上重现吗？我已经试过了，但没有发现应用程序根目录与任何元素都不匹配的具体错误。@CSantos您找到解决方法了吗？您能在StackBlitz上重现吗？我已经试过了，但没有发现应用程序根目录与任何元素都不匹配的具体错误。@CSantos您找到解决方法了吗？？