Search code examples
angularangular6angular-cli-v6

Angular Library is not running ngOnInit when used


I'm following the Angular CLI 6 instructions for creating a library here. I was able to make my library, and build it successfully. The library consists of a Component I am using for the UI and has an HTML selector.

@Component({
  selector: 'my-lib',
  templateUrl: './my-lib.component.html',
  styleUrls: ['./my-lib.component.css'],
  providers: [MyService],
})

export class MyComponent implements OnInit {
  @Input() id: string;

  constructor(
    private myService: MyService) {
    console.log("constructor");    
  }

  ngOnInit {
    console.log("ngOnInit");
    this.myService.DoStuff();
  }
}

Now I have a separate project I am trying to use this library in. I'm not publishing it yet, so I am using it by copying the contents of dist/<my-lib> into the node_modules of the other project. I was using npm link before, but I hit the issue described here, and this solution worked for me.

I can successfully import the library and Module and use the Component in the HTML file with its selector, along with passing inputs: <my-lib [id]="'my-id'">. The id is passed down correctly, but the logic in the ngOnInit that is not getting run. The console does NOT print "ngOnInit". But it DOES print "constructor", and the Component UI elements show up correctly.

Am I missing something to get the ngOnInit logic to run?

EDIT: I should mention that the library is running:

  • "@angular/core": "^6.0.3"

  • "@angular/cli": "~6.0.7"

and the project I'm trying to use the library in is:

  • "@angular/core": "^5.0.1"
  • "@angular/cli": "^1.6.5"

Not sure if this will affect anything or not.

EDIT2: Fix example code.


Solution

  • Only issue i see is that your instance of the service also has the same name, change it as

    constructor(
        private apiService: myService) {
        console.log("constructor");    
      }
    
    ngOnInit {
        console.log("ngOnInit");
        this.apiService.DoStuff();
      }
    

    also hope that you have imported,

    import { Component, OnInit } from '@angular/core';
    

    also remove providers in component and move it to the module level.