Angular 2 Routing Guard CanActivateChild with Lazy loaded module routing

Question

I have a main route which has children route and those children are lazy loaded module and in every lazy loaded module, I have separate routing for them as well. The problem I am having is when I guard the main route to prevent loading child route it calls multiple time

Main Routing code

export const PROVIDER_ROUTES: Route = {
    path: 'provider',
    component: ProviderComponent,
    canActivateChild:[AuthGuard],
    children: [
        { path: '', redirectTo: 'courses', pathMatch: 'full' },
        { path: 'courses', loadChildren: 'app/provider/course/course.module#CourseModule' },

    ],

};

Lazy Load routing code

const routes: Routes = [
  {
    path: '',
    component: CourseListComponent,
    resolve: { courses: CourseListResolver },
    children: [
      {
        path: ':id',
        component: CoursesEditComponent,
        resolve: { organizations: AddCourseResolver }
      },
      {
        path: ':id/edit',
        component: CoursesEditComponent,
        resolve: { course: CourseEditResolver }
      },
      {
        path: ':id/assign/:orgId',
        component: CourseAssignComponent,
        resolve: { subOrganizations: LicenseAssignResolver }
      },
      {
        path: ':id/update/:orgId',
        component: CourseAssignComponent,
        resolve: { license: LicenseEditResolver }
      }

    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    CourseListResolver,
    CourseEditResolver,
    LicenseAssignResolver,
    LicenseEditResolver,
    AddCourseResolver
  ],
  exports: [RouterModule],
})
export class CourseRoutingModule { }

export const RoutedComponents = [
  CourseListComponent,
  CoursesEditComponent,
  CourseAssignComponent
];

AuthGuard code is

export class AuthGuard implements CanActivateChild {

  constructor(private authService: AuthService, private router: Router, private commonService:CommonService) { }
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isUserLoggedIn().map((result: EditUser) => {
      console.log(result);
      if (result != null && result.organizations.length > 0) {
        this.commonService.isAuthenticated = true;
        return true;
      }
      this.commonService.isAuthenticated = false;
      this.router.navigate(["/provider"])
      return false;
    });

The AuthGuard function called multiple times Why?

Adawg Adawg · Accepted Answer · 2018-03-01T15:52:06

You have 2 levels of activated routes so it will check the guard for each level. If you want to make it call once just move the guard down to the child level.

Angular 2 Routing Guard CanActivateChild with Lazy loaded module routing

2 Answers