1

我有以下问题。我有一个使用 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 来测试自定义元素

   <!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>

关于这个问题有什么建议吗？

提前致谢

4

4 回答 4

5

尝试使用<my-element>而不是<myElement>. 此外，将您的customElements.define呼叫调整为customElements.define('my-element', el);. 如果我没记错的话，要将自定义元素与本机浏览器元素分开，每个自定义元素都必须至少有一个破折号。HTML 不区分大小写。

于 2018-06-12T07:45:27.960 回答
0

在你的main.ts文件中应该是这样的。

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

import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';

@NgModule({
   entryComponents: [
      AppComponent
   ],
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: []
})
export class AppModule {
   constructor(private injector: Injector) {
      const firstComponent = createCustomElement(AppComponent, { injector });
      customElements.define('name-of-your-component', firstComponent);
   }

   ngDoBootstrap() {}
}

所以基本上你必须在引导你的组件之前声明自定义元素。

查看本文以获取分步指南。

于 2018-06-24T20:38:56.327 回答
0

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>

并以此更新 app.module.ts。

customElements.define('my-element', el);

从这里阅读更多信息。

于 2021-01-01T16:35:14.070 回答
0

你应该在构建之前注释你的 bootstrap:[AppComponent] 行，所以它不会被你的客户元素引导。

于 2019-09-26T20:16:09.360 回答