我对 AngularJS 发布后的 Angular 版本有点陌生,并决定尝试一下。我想要做的是构建一个 UI 组件库,以及一个将使用所述库的应用程序。在我的库中,我决定将组件创建为 WebComponents,所以按照我目前找到的教程,我有类似的东西
import { Injector, NgModule } from '@angular/core'
import { createCustomElement } from '@angular/elements';
import { MyButtonComponent} from './my-button.component'
@NgModule({
declarations: [MyButtonComponent],
entryComponents: [MyButtonComponent]
})
export class MyButtonModule {
constructor(injector: Injector) {
const myButton = createCustomElement(MyButtonComponent, { injector });
customElements.define('my-button', myButton);
}
}
Run Code Online (Sandbox Code Playgroud)
对于我的自定义组件。如果我将组件的所有文件(模块、组件、模板和 SCSS 文件)直接添加到我的应用程序中,它会按预期工作,所以我知道我的组件声明是正确的。但是,如果在我的应用程序中包含库中的组件,则在使用 运行我的应用程序时ng serve,我会看到错误:
Error: StaticInjectorError(AppModule)[MyButtonModule -> Injector]:
StaticInjectorError(Platform: core)[MyButtonModule -> Injector]:
NullInjectorError: No provider for Injector!
Run Code Online (Sandbox Code Playgroud)
我正在使用 Angular 6,并且我的两个项目都在本地运行,并且我正在使用ng-packagr捆绑我的库。我在我的库中添加了@angular/coreand @angular/elementsaspeerDependencies …