ngOnInit not being called when Injectable class is Instantiated

ngOnInit not being called when Injectable class is Instantiated

Why isn’t ngOnInit() called when an Injectable class is resolved?
Code
import {Injectable, OnInit} from ‘angular2/core’;
import { RestApiService, RestRequest } from ‘./rest-api.service’;

@Injectable()
export class MovieDbService implements OnInit {

constructor(private _movieDbRest: RestApiService){
window.console.log(‘FROM constructor()’);
}

ngOnInit() {
window.console.log(‘FROM ngOnInit()’);
}

}

Console Output
FROM constructor()

Solutions/Answers:

Solution 1:

Lifecycle hooks, like OnInit() work with Directives and Components. They do not work with other types, like a service in your case. From docs:

A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroy it before removing it from the DOM.

Directive and component instances have a lifecycle as Angular creates, updates, and destroys them.

Solution 2:

I don’t know about all the lifecycle hooks, but as for destruction, ngOnDestroy actually get called on Injectable when it’s provider is destroyed (for example an Injectable supplied by a component).

From the docs :

Lifecycle hook that is called when a directive, pipe or service is destroyed.

Just in case anyone is interested in destruction check this question:

Solution 3:

Note: this answer applies only to Angular components and directives, NOT services.

I had this same issue when ngOnInit (and other lifecycle hooks) were not firing for my components, and most searches led me here.

The issue is that I was using the arrow function syntax (=>) like this:

class MyComponent implements OnInit {
    // Bad: do not use arrow function
    public ngOnInit = () => {
        console.log("ngOnInit");
    }
}

Apparently that does not work in Angular 6. Using non-arrow function syntax fixes the issue:

class MyComponent implements OnInit {
    public ngOnInit() {
        console.log("ngOnInit");
    }
}
Related:  jQuery remove all list items from an unordered list