Angular6:使用本地库时没有提供注射器的提供程序 [英] Angular6: No Provider for Injector when using local library
问题描述
我对AngularJS发布的Angular版本有些陌生,因此决定尝试一下.我想要做的是建立一个UI组件库,以及一个将使用该库的应用程序.在我的库中,我决定将这些组件创建为WebComponents,因此按照到目前为止找到的教程,我会得到类似的
I'm somewhat new to Angular versions post AngularJS and decided to give them a try. What I want to do is to build a library of UI components, and an application that will consume the said library. In my library, I decided to create the components as WebComponents, so following the tutorials I've found so far, I have something like
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);
}
}
对于我的自定义组件.如果我将组件的所有文件(模块,组件,模板和SCSS文件)直接添加到我的应用程序中,它将按预期工作,因此我知道组件声明是正确的.但是,如果在我的应用程序中包括库中的组件,则使用ng serve
运行我的应用程序时,会看到错误:
For my custom component. If I add all the files (the module, the component, template and SCSS files) for my component directly to my application it works as expected, so I know my component declaration is right. However, if in my application I include the component from my library, when running my app with ng serve
, I see the error:
Error: StaticInjectorError(AppModule)[MyButtonModule -> Injector]:
StaticInjectorError(Platform: core)[MyButtonModule -> Injector]:
NullInjectorError: No provider for Injector!
我正在使用Angular 6,并且两个项目都在本地运行,并且正在使用ng-packagr
捆绑我的库.我在库中添加了@angular/core
和@angular/elements
作为peerDependencies
,并且在主应用程序中我必须添加
I'm using Angular 6 and I have both projects running locally and I'm using ng-packagr
to bundle my library. I added @angular/core
and @angular/elements
as peerDependencies
in my library, and in my main app I had to add
"resolutions": {
"@angular/core": "6.1.4"
}
解决错误cannot redeclare block-scoped variable 'ngDevMode'
(不确定是否相关).最初,我认为注入错误可能是由此引起的,但是我已将preserveSymlinks
添加到我的angular.json
文件中,但仍然出现错误.
To solve the error cannot redeclare block-scoped variable 'ngDevMode'
(not sure if this is related or not). Initially I thought the injection error could be caused by this but I've added the preserveSymlinks
to my angular.json
file and I still have the error.
有什么想法可能导致这种情况吗?
Any thoughts on what might be causing this?
更新:如果我从库文件夹中手动复制文件并将其粘贴到主应用程序的node_modules
文件夹中,它将起作用,这使我认为这涉及符号链接.
UPDATE: If I copy the files manually from my library folder and paste them inside the node_modules
folder of my main app it works, which leads me to think it's something involve symbolic links.
推荐答案
使用npm link
版本的库运行业力,需要在test
(builder-angular:karma
部分)angular.json
中添加preserveLinks: true
:>
to run karma with npm link
'ed library its required to add preserveLinks: true
in test
(builder-angular:karma
section) angular.json
:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"preserveSymlinks": true,
// ...
这篇关于Angular6:使用本地库时没有提供注射器的提供程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!