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