CODEWITHSUNDEEP
angular
mr.alaa
mr.alaa

Reputation: 76

prview component inside module lazy loading angular problem

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

Upvotes: 0

Views: 61

Answers (1)

Dmitrii Makarov
Dmitrii Makarov

Reputation: 759

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.

Upvotes: 0

Related Questions