Angular9 canActivateChild starts before canActivate finished


I have routing-module file with these routes:

const routes: Routes = [

        path: '',
        component: MainComponent,
        canActivate: [LoadDataGuard, ConfigureJsGuard],
        canActivateChild: [EnterChildGuard],
        canDeactivate: [CleanupJsGuard],
        data: {
            modelService: ModelService,
        } ,
        children: [
                component: ChildComponent,

In LoadDataGuard I write a canActivate function which calls to enterTab function (enterTab manage the data of childComponent ,
this is my code:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.modelService.loadData()
                 tap(data => {
                map(data => true),
                catchError(err => this.handleError(err))

this is enterTab function

 private async enterTab(modelService: TabRepository) {
        if (modelService.enterTab) {
            return await modelService.enterTab();

in modelService:

enterTab() {
            return this.modelApiService.getModelMetaData()
                .pipe(tap((result: any): Observable<any> => {
                        this.modelMetaData =;-> this data received after canActivateChild starts.!!!

in canActivateChild I am using modelService.modelMetaData but it is undefined because the child component loads before canActivate of the parent finish.

how can I resolve this problem?

Source: Angular Questions

Categorized as angular, canactivate, canactivatechild, promise Tagged , , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us