ngOnInit is not triggering after disabling zone.js in Angular 5

Question

I recently upgraded my Angular app from 4.3 to 5.0 and trying to play around some of the new features in it. One of them is removing dependancy from zone.js.

main.ts:

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZone: 'noop',
});

component:

import { ApplicationRef, Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Rx';

import { MenuService } from '../../services/menu.service';

@Component({
  selector: 'ba-menu',
  templateUrl: './baMenu.html',
  styleUrls: ['./baMenu.scss'],
})
export class BaMenu {
  menuItems: any[];
  protected _menuItemsSub: Subscription;
  protected _onRouteChange: Subscription;

  constructor(public _router: Router, public _service: MenuService, public app: ApplicationRef) {
    console.log('constructor triggered'); //This worked
    this.app.tick();
  }


  ngOnInit(): void {
    console.log('ngOnInit() triggered'); //This doesn't worked
    this._onRouteChange = this._router.events.subscribe((event) => {

      if (event instanceof NavigationEnd) {
        if (this.menuItems) {
          this.selectMenuAndNotify();
        } else {
          // on page load we have to wait as event is fired before menu elements are prepared
          setTimeout(() => this.selectMenuAndNotify());
        }
      }
    });

    this._menuItemsSub = this._service.menuItems.subscribe(this.updateMenu.bind(this));
  }

  public ngOnDestroy(): void {
    console.log('ngOnDestroy() triggered'); //This worked
    this._onRouteChange.unsubscribe();
    this._menuItemsSub.unsubscribe();
  }

}

In my component the ngOnDestroy() event is getting fired but ngOnInit() is not getting fired. And since ngOnInit() is not working, _onRouteChange never gets initialized and I get error on line this._onRouteChange.unsubscribe(); inside ngOnDestroy.

Error:

zone.js:690 Unhandled Promise rejection: Cannot read property 'unsubscribe' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'unsubscribe' of undefined

Did you ever find the cause of this? I am also getting the problem where ngOnDestroy is being called before ngOnInit, despite everything being implemented correctly. — Martyn
– Martyn, Commented May 3, 2018 at 11:36

starlight · Accepted Answer · 2017-11-13 03:12:12Z

-2

You haven't implemented OnInit in your component code.

//Change here
export class BaMenu implements OnInit {
  menuItems: any[];
  protected _menuItemsSub: Subscription;
  protected _onRouteChange: Subscription;

  ngOnInit() {
     //Some code
  }
  //Some code

}

answered Nov 13, 2017 at 3:12

starlight

7854 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

You don't need to specify that a component implement OnInit in typescript. Simply adding an ngOnInit() method to a component works. Per the Angular docs, Angular will call a lifestyle hook if it is defined. Adding implement OnInit is only useful for type checking in an IDE.

Collectives™ on Stack Overflow

ngOnInit is not triggering after disabling zone.js in Angular 5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related