Angular 5: I can navigate to a module's route without including the module's path segment in the URL?

Question

So I built an Angular 5.2.0 app that I divided into 3 modules:

• An admin module, to be loaded when the user navigates to any admin/** route,
• A prefect module, to be loaded when the user navigates to any prefect/** route,
• An authentication module, to be loaded in every other case.

Each module does its own routing. For instance /admin/student/list activates the StudentListComponent defined within the admin module.

Now if I go to /student/list, without the /admin part, it will load that same StudentListComponent! And this can be reproduced with every route defined in the app's modules.

This is obviously not desirable behavior. Especially given that I have route guards in place to protect the admin and prefect modules and this makes it very easy to circumvent them.

Any insights appreciated. Is it a bug? Or am I doing something wrong?

This is the code I have in app.module.ts:

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: 'app/modules/admin/admin.module#AdminModule',
    canActivate: [AdminGuard]
  },
  {
    path: 'prefect',
    loadChildren: 'app/modules/prefect/prefect.module#PrefectModule',
    canActivate: [PrefectGuard]
  },
  {
    path: '',
    loadChildren:
      'app/modules/authentication/authentication.module#AuthenticationModule'
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    AuthenticationModule,
    PrefectModule,
    AdminModule
  ],
  providers: [AdminGuard, PrefectGuard],
  bootstrap: [AppComponent]
})
export class AppModule {}

And in admin.module.ts:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: 'student',
        children: [
          {
            path: 'list',
            component: StudentListComponent
          },
          {
            path: 'new',
            component: StudentEditComponent
          },
          {
            path: ':id',
            component: StudentItemComponent
          },
          {
            path: ':id/edit',
            component: StudentEditComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    HttpClientModule,
    FormsModule,
    // Angular Material modules...
    NavigationModule
  ],
  providers: [StudentService],
  declarations: [
    AdminComponent,
    StudentListComponent,
    StudentItemComponent,
    StudentEditComponent
  ]
})
export class AdminModule {}

And in authentication.module.ts:

const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'reset',
        component: ResetPasswordComponent
      },
      {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FormsModule,
    // Angular Material modules...
  ],
  providers: [AuthenticationService, AdminService, StudentService],
  declarations: [
    AuthenticationComponent,
    LoginComponent,
    ResetPasswordComponent
  ]
})
export class AuthenticationModule {}

Answer 1

You're importing your lazy-loaded AdminModule inside your app component here :

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   RouterModule.forRoot(routes),
   AuthenticationModule,
   PrefectModule,
   AdminModule
],

so it is actually not lazy-loaded but loaded when AppModule is. So the routes of AdminModule will be accessible both from '/admin' since and the root : '/'. Just remove it from the imports of you AppModule and it should be fine.

I created a small repo with a working example of what you're trying to achieve here

Hope that helps