Angular 2 ngOnInit not called

Question

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

Have you made sure OverviewComponent works? If yes, Even if you don't import OnInit and implements OnInit, ngOnInit will work. — micronyks
@micronyks I added a message: string = 'test' to the OverviewComponent and tried to display it in the view with {{message}} and it worked. — Vincent Kenbeek
Oh ! In that case I need to see your code. Okay. Just try removing what I have suggested and see if works ! — micronyks
@Günter inside the RegisterComponent and inside the LoginComponent i have a working ngOnInit() in which i check if the user is logged in. If the user is logged in i use this._router.navigate['Overview'] — Vincent Kenbeek
That doesn't help much. Where is the code that calls this._router.navigate['Overview']. In the constructor, a callback from a library that communicates to the server, ...? — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-03-11T09:57:42

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

Angular 2 ngOnInit not called

1 Answers