Angular Lazy loaded module - Issue in a child route

Question

I have some modules: "dashboard", "family" and "children". These modules are lazy loaded in my appRoute except for the "childen" module:

export const appRoutes: Routes = [
  { path: '', loadChildren: 'app/dashboard/dashboard.module#DashboardModule' },
  { path: 'family', loadChildren: 'app/family/family.module#FamilyModule' },
  {
    path: '404',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  },
  {
    path: '**',
    component: Error404PageComponent,
    resolve: { data: Error404PageResolver }
  }
];


@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {
    preloadingStrategy: PreloadAllModules,
    useHash: false
  }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

My Family route file is like this:

const familyRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilleComponent     
];

@NgModule({
    imports: [RouterModule.forChild(familyRoutes)],
    exports: [RouterModule]
})
export class FamilyRoutingModule { }

And for my "children" module, it is almost the same thing except in the route, the first part of the route contains family route:

const childRoutes: Routes = [
  {
    path: 'family/:familyId/child',
    component: ChildComponent
  },
  {
    path: 'family/:familyId/child/:id',
    component: ChildComponent
  }
];

I would like to lazy load the "children" module but I don't know how to do it because this module is a child of the module "family". My issue is the route linked to child is not available. So the url http://localhost:4200/family/830503261/child/830581020 is not working.

I tried to add the line loadChildren in familyRoutes but is not working:

const familleRoutes: Routes = [
    {
        path: '',
        component: FamilyComponent
    {
        path: ':id',
        component: FamilyComponent,     
        loadChildren: './../child/child.module#ChildModule' 
];

I don't know how to access to my children using path "family" in the route.

Any idea? Thanks.

Pierre Mallet · Accepted Answer · 2017-12-19 15:05:32Z

1

You should configure your childModule as children of family route

    const familyRoutes: Routes = [
        {
            path: '',
            component: FamilyComponent
        },
        {
            path: ':id',
            component: FamilleComponent,
            children: [
                'path': 'child',
                'loadChildren': './../child/child.module#ChildModule', // <- or whatever path

            ]
        }

    ];

    @NgModule({
        imports: [RouterModule.forChild(familyRoutes)],
        exports: [RouterModule]
    })
    export class FamilyRoutingModule { }

and change the route of your childModule

const childRoutes: Routes = [
  {
    path: '',
    component: ChildComponent
  },
  {
    path: ':id',
    component: ChildComponent
  }
];

answered Dec 19, 2017 at 15:05

Pierre Mallet

7,2412 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrien · Accepted Answer · 2017-12-19 17:26:06Z

0

Thank you for your reply. It is working. I just add {}:

children: [
            {
                path: 'child',
                loadChildren: './../child/child.module#ChildModule'
            }
        ],

I have another question. In my child route file, I have also a guard and other stuff:

const childRoutes: Routes = [
  {
    path: '',
    component: ChildComponent,
    resolve: { user: AuthResolver, referentiel: ReferentielChildResolver },
    canActivate: [ChildActivateGuard]

  },
  {
    path: ':id',
    component: ChildComponent,
    resolve: { user: AuthResolver, child: ChildResolver, referentiel: ReferentielChildResolver },
    canActivate: [ChildActivateGuard]
  }
];

In my ChildActivateGuard, I would like to have the id of my family:

Injectable()
export class EleveActivateGuard implements CanActivate {

  can: boolean;
  constructor(private childService: ChildService, public http: HttpService) 
  { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    debugger;
    console.log(route.parent.params["familyId"]);
    ....
   }

But param familyId is undefined. I don't see what is missing? Thank you for your help.

answered Dec 19, 2017 at 17:26

Adrien

1211 gold badge2 silver badges9 bronze badges

1 Comment

Pierre Mallet Over a year ago

Without a plunker or stackblitz its hard to say, but i think that route params are not inherited. So you should use the RouterState object (Router.routerState (angular.io/api/router/RouterState)) which is a tree of all activated route. Then you chould traverse the differents routes to find the familyId param

Adrien · Accepted Answer · 2017-12-20 13:21:46Z

0

Thank you Pierre for your comment.

I found a solution. Even if I am not sure it is the best solution but it is working in the guard file of my child component:

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    var familyIdId = route.parent.parent.url[0].path;
    ...

answered Dec 20, 2017 at 13:21

Adrien

1211 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular Lazy loaded module - Issue in a child route

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related