Angular 2 nested routes resolve execution

Question

For example if I have following route organization:

const appRoutes: Routes = [
    {
        path: "",
        component: AppComponent,
        resolve: {
            app: AppResolver
        },
        children: [
            {
                path: "",
                component: NestedComponent,
                resolve: {
                    subscribers: NestedResolver
                }
            }
        ]
    }
];

and following resolvers:

export class AppResolver implements Resolve<any> {
    constructor(private appService: AppService) {}
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return this.appService.getAppData();
    }
}

export class NestedResolver implements Resolve<any> {
    constructor(private nestedService: NestedService) {}
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        console.log(route.parent.data); //when this is executed route.parent.data is empty :(
        return this.nestedService.getNestedData();
    }
}

After app bootstraping NestedResolver and AppResolver will execute first and make their requests in parallel.

Can we change code and implement that NestedResolver waits for AppResolver to resolve and has access to AppResolver resolved data?

Angular 2 RC6, Angular router 3.0.0-rc.2

Were you able to find answer to this? – Daniel Shin Oct 13 '16 at 02:39 — Daniel Shin, Oct 13 '16 at 02:39

score 4 · Accepted Answer · answered Feb 08 '17 at 17:57

I know this question is pretty old but just in case someone stumble upon it (like me).

This was a known bug and it has since been fixed. Just update your router version to something higher or equal to 2.1.0 and you should be good to go. For reference here is the relevant issue on github and the associated fix

Angular 2 nested routes resolve execution

1 Answers1

Linked