Angular6: No Provider for Injector when using local library

Question

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.

@UnluckyAj I haven't used stackblitz before (and looks a pretty useful tool by the way). I was taking a look and I will play with that some more, but do you know if there a way to create to stackblitz projects and make on as a dependency for the other for me to simulate my current setup? (Although, see my UPDATE. If it's a symbolic link issue somehow, I might not be able to reproduce it in stackblitz) — Tinadm, Aug 25 '18 at 21:46
Similar question, the accepted answer solved it for me: https://stackoverflow.com/questions/51614615/angular-6-7-the-result-of-a-dependency-is-an-expression — dummdidumm, Oct 02 '19 at 08:11

score 5 · Answer 1 · answered Mar 06 '19 at 13:04

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

score 3 · Answer 2 · answered Oct 03 '18 at 20:58

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

Angular6: No Provider for Injector when using local library

2 Answers2

Linked