prview组件内部模块延迟加载angular问题

Question

hi everybody I have built an angular app with lazy loading and everything works well except when I try to open child or pages inside modules it redirects me in anew page not inside the main one my structure is admin main module with component then user component and setting component my admin routing is

const routes: Routes = [
  { path : '' , component: AdminComponent},
  { path : 'User' , component: UserComponent},
  { path : 'Settings' , component: SettingsComponent},
  { path: '**', component: SystemErrorComponent }
];

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

I have added links and router-outlet inside admin HTML page

<div class="container">
  <button routerLink="" class="btn btn-sm btn-link">admin</button>
  <button routerLink="Settings" class="btn btn-sm btn-link">Settings</button>
  <button routerLink="User" class="btn btn-sm btn-link">User</button>
  <hr />


  <router-outlet></router-outlet>
  </div>

my app routing is

const routes: Routes = [

  { path: '', component: IndexComponent },
  { path: 'home', loadChildren: './home/home.module#HomeModule'},
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canActivate: [AuthGuard]},
  { path: '**', component: PageNotFoundComponent },

];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

when I open admin area it opened but when I click user it should open inside admin but it opened outside admin in a new page

why that happened as from my thought there is no error happened

Answer 1

to be able to open "user" and "settings" components inside admin components the routing structure should be:

- Admin
--- User
--- Settings

Only this way it is possible. So change your routings of AdminRoutingModule to:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      { path: 'User', component: UserComponent },
      { path: 'Settings', component: SettingsComponent },
      { path: '', redirectTo: 'User', pathMatch: 'full' },
    ],
  },
  { path: '**', component: SystemErrorComponent }
];

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

Angular shows only the child route's components in place of <router-outlet> . So let him know the correct routes structure.

Hope it helps.