Router: change detection doesn't work with manual initial navigation (is it a bug?)

[n9niwas]

I'm submitting a ... (check one with "x")

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Change detection doesn't work in initially loaded components if the router was configured to perform a manual initial navigation ({ initialNavigation: false } and router.initialNavigation()).
If navigation was triggered by the link like <a routerLink=...>, change detection works fine.

Expected behavior
Change detection works normally in both cases.

Note: after some debugging I figured out that if router.initialNavigation() is called within ngZone.run(), change detection works. But it is not a straightforward behavior.

Minimal reproduction of the problem with instructions

Repository with reproduction: https://github.com/n9niwas/issues-ng4-router.git.

1. open fresh browser window and navigate to /test/;
2. property "x" is not being updated in the view on setInterval() ticks.

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

Initial navigation has to be performed manually in hybrid applications because there is no bootstrapping (empty ngDoBoostrap()).

Please tell us about your environment:

Operating system: Windows 10.
IDE: VS Code.
Package manager: yarn.

• Angular version: 4.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript 2.2.2 | ES6/7 | ES5]

[DzmitryShylovich]

works in plunkr http://plnkr.co/edit/Pi8M8oCM7FbvOQANeEwD?p=preview
so I think it's something with your project config

[n9niwas]

@DzmitryShylovich this is not reproducible in plunker because it doesn't support url rewriting AFAIK.

This behavior is reproducible only if user tries to navigate to the application from fresh browser window, e.g. hitting F5, following by external link or using bookmark.

[DzmitryShylovich]

This behavior is reproducible only if user tries to navigate to the application from fresh browser window, e.g. hitting F5, following by external link or using bookmark.

why didn't you say anything about it in the description? :)

Now I can reproduce http://plnkr.co/edit/8eKeFgf308E1fVJOJXcj?p=preview :

1. open the plunkr in a new window http://prntscr.com/esinp6
2. copy paste url into a new browser tab
3. click on go to test and hit refresh

[Jrubzjeknf]

Ran into this issue when using angular-oauth2-oidc to authenticate my user, parse the token from the url and then performing initial navigation to the return url.

Until this issue is fixed, you can workaround it performing the initial navigation from a ngZone.run() as @n9niwas mentioned.

this.ngZone.run(() => {
    this.router.initialNavigation();
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}