CODEWITHSUNDEEP
angularangular2-routinglazy-loading
Haseeb Khan
Haseeb Khan

Reputation: 1040

Angular 2 Routing Guard CanActivateChild with Lazy loaded module routing

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?

enter image description here

Upvotes: 2

Views: 2436

Answers (2)

Merv
Merv

Reputation: 1149

What @Adawg means is this:

path: '',
component: CourseListComponent,
resolve: { courses: CourseListResolver },
canActivateChild:[AuthGuard],
children: [

putting canactivatechild in the lazy loaded routes section instead of in the root routes

Upvotes: 0

Adawg
Adawg

Reputation: 378

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.

Upvotes: 2

Related Questions