ngOnInit not being called when Injectable class is Instantiated

JavascriptAngularTypescript

Javascript Problem Overview


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()

Javascript Solutions


Solution 1 - Javascript

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

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

Adding to answer by @Sasxa,

In Injectables you can use class normally that is putting initial code in constructor instead of using ngOnInit(), it works fine.

Solution 4 - Javascript

I had to call a function once my dataService was initialized, instead, I called it inside the constructor, that worked for me.

Solution 5 - Javascript

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

Solution 6 - Javascript

import {Injectable, OnInit} from 'angular2/core';
import { RestApiService, RestRequest } from './rest-api.service';
import {Service} from "path/to/service/";

@Injectable()
export class MovieDbService implements OnInit {
 
userId:number=null;

constructor(private _movieDbRest: RestApiService,
            private instanceMyService : Service ){

   // do evreything like OnInit just on services

   this._movieDbRest.callAnyMethod();
 
   this.userId = this.instanceMyService.getUserId()

 
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLevi FullerView Question on Stackoverflow
Solution 1 - JavascriptSasxaView Answer on Stackoverflow
Solution 2 - JavascriptSBD580View Answer on Stackoverflow
Solution 3 - JavascriptChanelView Answer on Stackoverflow
Solution 4 - JavascriptEduardo A EDUARDO Fernandez DiView Answer on Stackoverflow
Solution 5 - JavascriptAJ RichardsonView Answer on Stackoverflow
Solution 6 - Javascripthassan khademiView Answer on Stackoverflow