这个问题通常发生在使用 Angular Elements 将组件打包成独立的 web 组件时。 这个错误意味着我们在编译 Angular Elements 时,缺少必要的依赖关系。 更具体地说,Angular Elements 编译器无法解析组件或指令的名称。
要解决这个问题,我们需要在 Angular 项目中检查几个要素:
下面是一个示例代码:
@Component({ selector: 'my-component', template: '
@NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, MyDirective, MyComponent ], declarations: [ MyDirective, MyComponent ], bootstrap: [], entryComponents: [ MyComponent ] }) export class AppModule { constructor(private injector: Injector) { const myCustomElement = createCustomElement(MyComponent, { injector }); customElements.define('my-custom-element', myCustomElement); }
ngDoBootstrap() {} }
请注意,我们在上边的代码中注册了 createCustomElement 方法并定义了组件名称('my-custom-element')。 这个自定义元素现在可以在任何网站上使用,并且它应该将 'my-component' 引入作为它的依赖项。