Solvedangular 4-10 seconds delay between navigated component's Constructor and ngOnInit()

I'm submitting a...

[ X] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Initial load of the module happens quickly but, when navigated to a route, the constructor of the destination component is also called in a timely manner, but the ngOnInit() method is not called for another 4-10 seconds. This happens every time and with not just one but all components that are called using navigation.

Expected behavior

This issue only surfaced when I upgraded Angular from 4.0.1 to 4.3.4. No code was changed in the app.

Minimal reproduction of the problem with instructions

I'm unable to create a plunker to reproduce this issue with shell code. If someone can shed some light on what happens between the component's constructor being called and ngOnInit() being called, I may be able to debug this further.

EDIT- Notably, the delay is observed right after processing Google Auth response that is processed by a Service, which then calls router.navigate() to the component in question.

What is the motivation / use case for changing the behavior?

The motivation is obvious. The delay is not expected behavior.

Environment

Production code is built using the following command -
node --max_old_space_size=8192 ./node_modules/.bin/ng build --aot --prod

Angular version: X.Y.Z
@angular/cli: 1.3.0
node: 6.9.5
os: darwin x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/compiler-cli: 4.3.4
@angular/core: 4.3.4
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/platform-server: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0



Browser:
- [ X] Chrome (desktop) version XX
- [ X] Chrome (Android) version XX
- [ X] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ X] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX   v6.9.5
- Platform:   Mac OSX latest.

Others:

I have also faced this behavior. Following workaround works for me:

constructor (
  private zone: NgZone,
  private changeDetector: ChangeDetectorRef
) {
  setTimeout(() => {
    this.zone.run(() => {
      this.changeDetector.detectChanges();
    });
  });
}

Very similar to @tytskyi suggestion.

I know that putting zone inside timeout may look weird. This is my result of trial and error process. Looks like this task has to be put on queue first and then wrapped inside zone.

Caveats:

• because we are manually rushing change detection, the component might have some problems with @Inputs. I had to assign default values to my inputs in order to make it work.

@Input() public site: Site;
changed to
@Input() public site: Site = {};

• I also had to move all my observable definitions from ngOnInit to constructor (same reason as above).

constructor() {}

public onOnInit(): void {
  this.selectedInstance$ = this.selectedInstanceSubject$
    .distinctUntilChanged()
}

changed to

constructor() {
  this.selectedInstance$ = this.selectedInstanceSubject$
    .distinctUntilChanged()
}

public onOnInit(): void {}

Looking forward to get it sorted.

Thanks @tytskyi

Indeed, calling ChangeDetectorRef markForCheck() + detectChanges() "fixes" the situation:

  constructor(private cdr: ChangeDetectorRef) {
    setTimeout(() => this.setChanged(), 0);
  }

  setChanged() {
    this.cdr.markForCheck();
    this.cdr.detectChanges();
  }

Without setTimeout(), everything breaks.

One of the problems with this workarounds is that we would need to repeat this in pretty much all components that can be possibly navigated to, which is plenty of components.

Same problem here... in my case this behaviour just happens when I'm logged with google auth, when logged with firebase email/pwd I have no delay.
It's my first project with angular, so I don't know if I'm doing something stupid. But the cited workaround works fine for me too. Thanks.

  refresh() {
    setTimeout(() => {
      this.zone.run(() => {
        this.cdr.detectChanges();
      });
    });  
  }