Angular doesn't invoke ngOnInit when programatically routing back to a page

Question

I've implemented the following console outputs to follow what's executed and what's not. The code for a page under /dataList.

export class DataList implements OnInit {

  constructor(private service: DataService) { 
    console.log("constructed");
  }

  ngOnInit() {
    console.log("inited");
    ...
  }

}

Now, it works as supposed providing both the outputs (i.e. constructed and inited) in the console when accessing the page by entering a URL and also when accessing the page using routing from another page, as show below.

this.router.navigateByUrl("/dataList");

However, it doesn't show initied (only constructed) when I navigate from this page to a detailed page (with URL like /dataElement/12345, with 12345 being an ID) and then return back to the the page /dataList executing the navigation by URL shown above. (If I then hit F5, I get to see both constructed and inited, though.)

I didn't think it was even possible to get into the constructor without getting into ngOnInit, given the implemented interface but apparently, I was mistaken (and majorly baffled too).

The best diagnostics that I can up with is that when navigating from a route of subpath, the initialization isn't invoked. But it seems so weird to me so I'm suspect I haven't diagnosed it correctly, neither. Googling produced nothing that I recognized as adequately related (like this or this). And the routing is like this.

const routes: Routes = [
  { path: "", component: StartComponent },
  { path: "dataList", component: DataListComponent },
  { path: "dataElement/:id", component: DataElementComponent },
  ...
  { path: "**", component: StartComponent }
];

@ConnorsFan Yes, consistent in Cr and FF. Didn't bother to test it in the crappy ones. — DonkeyBanana, Jan 08 '18 at 21:07
[This issue](https://github.com/angular/angular/issues/8012) reported a similar problem (in 2016) and it was found that the order in which libraries are imported may have some influence. You can check if some librairies are imported after `zone.js` (e.g. in vendor.ts) and change the order to see if it makes a difference. — ConnorsFan, Jan 08 '18 at 21:24

score 5 · Accepted Answer · answered Jan 08 '18 at 19:59

After I had some incredible strike of genius (a.k.a. dumb luck), I got to see see something about a bug in Angular 5 (and some 4s as well). Apparently, the magic to kill this issue looks like this.

import { NgZone, ... } from "@angular/core";

export class DataElement implements OnInit {

  constructor(private zone: NgZone, ... ) { ... }

  shaboo() {
    ...
    this.zone.run(() => {
      this.router.navigateByUrl("/dataList");
    });
  }
}

Now, I have no idea what it does and even less idea how nor why. I simply copied a code sample from this place as described in this reply. That's the shortest path to not understanding what's going on and I totally hate it, so if someone would like to provide some pointers on the subject, I'd be ecstatic (also, if those explain how such a simple issue can still cause problems in version 5, that'd be even more awesome).

Angular doesn't invoke ngOnInit when programatically routing back to a page

1 Answers1