fix(router): bootstrap finishes before all routes are resolved

[jeffbcross]

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

[x] bug report => search github for a similar issue or PR before submitting

Current behavior

If I have a router that requires resolving async data, bootstrap will complete before the router has finished resolving and rendering. Any parent components that have already loaded will be rendered while waiting for children to load. This behavior is most problematic with pre-rendered applications. The user will first see the pre-rendered content, then when bootstrap is complete and route resolution is still pending, they'll see either a blank page or partially-rendered page, then once all routes are resolved, the full page content will render and should match the pre-rendered content .

Expected behavior

I expect bootstrap not to complete before route resolution and rendering is complete.

Minimal reproduction of the problem with instructions

• Clone this GH repo and npm run start https://github.com/jeffbcross/cli-aot-route-bug
• Point browser at localhost:4200/items
• Watch the console for logs when bootstrap is done and when the items component is initialized.

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

A smooth transition from pre-rendered page to dynamic page and preboot compatibility.

• Angular version: 2.0.2 and router 3.1.0-rc.0

[vsavkin]

Notes:

Currently we trigger the initial navigation in a bootstrap listener. Angular does not wait for bootstrap listeners to complete.Moving the logic naively into an application listener will not work because the root component is not created at that point. So the router can successfully run preactivation, but cannot run activation. We can split navigate into preactivate and activate. Runpreactivatein an application listener and runactivate ` in a bootstrap listener.

[diestrin]

Is this being address by anyone? More than 3 months and it's still happening :/

[DzmitryShylovich]

@vicb the fix was merged so it can be closed

[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.}