1

I am writing Angular2 App using RC5.

When AppComponent load, I want application to request config file using http and and once its loaded I want app to navigate to the route specified?

How can I achieve that ?

There is 'canActivate' property on each route, but I would see that it has more to do with if I want to do something every time user navigate to new route. Mostly used for authentication purpose, where you want only few routes to be protected with Authentication but in my case I would like to load configuration when AppComponent load. Not on every route activation or navigation.

Hope I made my self clear what I am trying to achieve.

microchip78
  • 2,040
  • 2
  • 28
  • 39
  • I think you're looking for resolve: https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html – JB Nizet Aug 25 '16 at 06:32

2 Answers2

1

You can store in the canActivate guard that the initial re-navigation had been done and for subsequent calls only return true.

You could configure the router with a single route

{ path: '**', InitComponent }

and in InitComponent load your configuration, reconfigure the router (pass all routes) and then forward to the path initially requested.

See also Angular 2 Dynamic Route Building & Component Level Permissions

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Yes, I thought of that. But is there any other provision in RC5 that even before going to any route when application load first time, its go and get config. I mean resolve that service call ... – microchip78 Aug 25 '16 at 06:29
  • Because in this solution, every time I add new route, I have to add **canActivate** in to it ... its not elegant – microchip78 Aug 25 '16 at 06:31
  • I'm not sure what you mean. Is this about first load of the app with deep links? – Günter Zöchbauer Aug 25 '16 at 06:33
  • 1
    I didnt get it fully, but I will try what you suggested here and let you know ... – microchip78 Aug 25 '16 at 11:04
  • Thanks for your answer. It seems to be working for one you have one application module but it is not working when you have module for each features in your app. So all routes for root of the applications re-route to init component but when user try to route to another area of the application which has its own module it takes user there without routing to init component. – microchip78 Sep 03 '16 at 21:45
  • Not sure what you mean. Would you mind creating a new question with a Plunker to reproduce? – Günter Zöchbauer Sep 04 '16 at 06:32
1

You should create a resolver that does the request, add the resolver to the route and get the resolved config data in the onInit of your component.

Component.Route:

export const routes: Route[] = [
  { path: ':id', component: Component1, resolve: { data: Comp1Resolver }}
];

Comp1Resolver: 

@Injectable()
export class Comp1Resolverimplements Resolve<Config> {
    constructor(private configService: ConfigService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Config> {
        return this.configService.get(route.params['id']);
    }
}

Component1:

ngOnInit() {
let that = this;
 this.route.data.subscribe(data => {
 that.config= data['data'];
Marcel Hoekstra
  • 1,334
  • 12
  • 19
  • I got your point. But even in this scenario, it is tied with route. My requirement is not to navigate to any path until I receive response from service and load application configuration from server. In above example if I route to path http://hostname/:id then it will call Comp1Resolver but what if user call http://hostname/about or any other route. So I also have to configure all the routes with same resolver. – microchip78 Aug 25 '16 at 10:59
  • Then you can do what Gunter says. Create one route with a resolver and create childRoutes for /about, /:id etc. Then your urls will be hostname/parent/about hostname/parent/id – Marcel Hoekstra Aug 25 '16 at 15:06