Angular 2 Fix root component before instantiating child components

Question

When I update my web application, I want it to request the potential, signed in the user data, before creating any components or routes. If user data was found, I want to enter it into the service on which all my other supporting components depend.

Scenario: let's say I have 3 components, an application (ROOT), home and more. If I put this code in my About component, I expect it to wait 20 seconds before it instantiates, instead the component will be instantly created, only when I leave this component, it calls the function, and I wait 20 seconds to get home.

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { return new Promise((res, rej) => { setTimeout(function () { res(true); }, 20000) }) } 

Ideally, I do not want the solution to be connected to any route, I want the request to be resolved in the root component before I even create any routes.

Answer 1

There are actually two ways to do this.

1) Or you can extend the Router-Outlet class, and for each active component you can wait 20 seconds and easily cope with singedIn user data (both can be processed in one file or in one place).

2) OR in a separate component you can use @CanActivate hook and wait 20 seconds, and when the component is activated, you can insert a shareService (possibly containing a user information object) into the constructor and do something else.

To do this, you can use @CanActivate in the component and wait 20 seconds before it starts.

If I put this code in my About component, I expect it to wait 20 seconds before it is created, instead the component gets instantly generated ...

 @CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => { return new Promise((res, rej) => { setTimeout(function () { res(true); }, 20000) }) })