Angular 2 ngOnInit not called

Vincent Kenbeek picture Vincent Kenbeek · Mar 11, 2016 · Viewed 37.8k times · Source

I am building an Angular 2 app with version beta.8.
In this app i have a component which implements OnInit.
In this component i have the function ngOnInit, but the ngOnInit function is never called.

import { Component, OnInit } from 'angular2/core';

@Component({
  templateUrl: '/app/html/overview.html'
})

export class OverviewComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit');
  }
}

The Routing of the app:

@RouteConfig([
  {
    path: '/overview',
    name: 'Overview',
    component: OverviewComponent
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterComponent,
    useAsDefault: true
  }
])

There is a check to see if the user is already logged in inside the LoginComponent and RegisterComponent.
If the user is logged in, the components redirect to Overview using: router.navigate(['Overview']).
If i use the Overview route as default i do see ngOnInit inside the console.
So the way i redirect my page seems to be the problem.
How can redirect to the Overview page and call the ngOnInit function?

Both the RegisterComponentand the LoginComponent use

ngOnInit() {
  this._browser.getStorageValue('api_key', api_key => {
    if (api_key) {
      this._browser.gotoMain();
    }
  })
}

Browser is a class in which i store browser specific code. This is the gotoMain function:

gotoMain() {
  this._router.navigate([this._browser.main]);
}

this._browser.main is just a string in this case 'Overview'.

Answer

Günter Zöchbauer picture Günter Zöchbauer · Mar 11, 2016

I guess it's a zone issue.

Inject NgZone (import from angular2/core

constructor(private zone:NgZone) {}

this._browser.getStorageValue('api_key', api_key => {
  if (api_key) {
    this.zone.run(() => this._browser.gotoMain());
  }
})