CODEWITHSUNDEEP
angulartypescriptroutes
Molloch
Molloch

Reputation: 2381

Angular Child Routes Navigable without Parent Route

I have some routes in an Angular 13 app which load other modules that contain a number of child routes.

My routing is set up in each module:

@NgModule({
    declarations: [DashboardComponent],
    imports: [RouterModule.forChild(childRoutes)]})
export class ChildModule{}

export const childRoutes = [
    {path: 'dashboard', component: DashboardComponent},
    {path: 'reports', component: ReportsComponent}];

My parent module lazy loads the child module:

export const appRoutes = [
    {path: 'store', component: StoreLayoutComponent,
     loadChildren: () => import('app/store/child.module').then(m => m.ChildModule)}];

@NgModule({
    imports: [
    ...
    RouterModule.forRoot(appRoutes)
    ],
    ...})
export class AppModule {}

Both the urls https://localhost:4200/store/dashboard and https://localhost:4200/dashboard load the child DashboardComponent.

The second url shouldn't be valid. Why is it valid?

Upvotes: 4

Views: 1043

Answers (2)

Molloch
Molloch

Reputation: 2381

The issue here was that the StoreModule was both being lazy loaded and appeared in the app.module.ts of the application. This created routes for the module both as a direct child of the app.module and also as a lazy loaded module at the correct address.

Removing the declaration of StoreModule from the imports statement of app.module.ts solved the problem.

Hopefully this helps someone in the future.

Upvotes: 5

Preetha Pinto
Preetha Pinto

Reputation: 342

Try putting the child routes within the children.

Child

@NgModule({
    declarations: [DashboardComponent],
    imports: [RouterModule.forChild(childRoutes)]})
export class ChildModule{}

export const childRoutes = [{
children:[
    {path: 'dashboard', component: DashboardComponent},
    {path: 'reports', component: ReportsComponent}]
}];

Parent

export const appRoutes = [
    {path: 'store', component: StoreLayoutComponent,
     loadChildren: () => import('app/store/child.module').then(m => m.ChildModule)}];

@NgModule({
    imports: [
    ...
    RouterModule.forRoot(appRoutes)
    ],
    ...})

Upvotes: 2

Related Questions