36

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

trungk18
  • 19,744
  • 8
  • 48
  • 83
Vincent Kenbeek
  • 583
  • 1
  • 5
  • 11
  • 1
    Have you made sure `OverviewComponent ` works? If yes, Even if you don't import `OnInit` and implements `OnInit`, `ngOnInit` will work. – micronyks Mar 11 '16 at 09:39
  • @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 Mar 11 '16 at 09:45
  • Oh ! In that case I need to see your code. Okay. Just try removing what I have suggested and see if works ! – micronyks Mar 11 '16 at 09:47
  • @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 Mar 11 '16 at 09:48
  • 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 Mar 11 '16 at 09:49
  • @micronyks It works if i set Overview as my default route but not if get to overview through `router.navigate['Overview']`. – Vincent Kenbeek Mar 11 '16 at 09:50
  • @Günter this is the inside of the `ngOnInit()` of my `LoginComponent` `this._browser.getStorageValue('api_key', api_key => { if (api_key) { this._browser.gotoMain(); } })` – Vincent Kenbeek Mar 11 '16 at 09:52
  • edit your code. show us `route.config` and as `Gunter` has said. – micronyks Mar 11 '16 at 09:52
  • http://plnkr.co/edit/cPDpUtTpklymlFf7iQhv?p=preview try to play with it if possible. – micronyks Mar 11 '16 at 09:53
  • N Gunter sorry for not being able to put **`..`** accent in your name through keyboard. – micronyks Mar 11 '16 at 09:57
  • @micronyks no worries :D We use `ue`, `oe` instead of `ü`, `ö` on systems where umlauts are not available, but just `u`, `o` is fine as well in informal use. – Günter Zöchbauer Mar 11 '16 at 10:02

1 Answers1

75

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());
  }
})
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    It works thank you @Günter. what does NgZone do to make this work? – Vincent Kenbeek Mar 11 '16 at 10:12
  • 17
    Angular runs its code in a patched zone where `addEventListener()`, `setTimeout()`, and other async APIs are patched to notify Angular when async action has happened to rerun change detection. This makes change detection quite efficient. When code is called that somehow circuments Angulars zone, Angulars change detection doesn't kick in. If a method (even one from an Angular component or similar) is called from code that was invoked outside Angulars zone, everything runs outside the zone until this event is fully processed. With `zone.run(...)` you force execution back into Angulars zone. – Günter Zöchbauer Mar 11 '16 at 10:23
  • To get around this for `addEventListener()`, you can use `BrowserDomAdapter` and it will do this for you. – Philip Mar 18 '16 at 19:58