Angular6: No Provider for Injector when using local library

问题

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);
    }
}

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!

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"
}

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?

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.

回答1:

I had the same problem, i solved it with the solution planted on that post: https://github.com/jvandemo/generator-angular2-library/issues/277

The problem happens When you apply the npm install command locally to a project library folder, the npm create a shortcut of the library and the error appears.

Another solution it's to you pack your library using "npm pack yourlibary" command and install the generated file with npm install at the target project

回答2:

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,
        // ...

来源：https://stackoverflow.com/questions/52017988/angular6-no-provider-for-injector-when-using-local-library

标签

angular

angular6