Angular routing for the component

Question

I watch videos on YouTube on routing in Angular. The app-routing.module file.ts, I omit the imports

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, children: [
      {path: '', redirectTo: '/', pathMatch: 'full'},
      {path: '', component: MainPageComponent},
      {path: 'product/:id', component: ProductPageComponent},
      {path: 'cart', component: CartPageComponent}
    ]
  },
  {
    path: 'admin', loadChildren: './admin/admin.module#AdminModule'
  }
];

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

Next, a separate admin.module is created there.ts, which implements another routing

@NgModule({
    declarations: [
        AdminLayoutComponent,
        LoginPageComponent,
        DashboardPageComponent,
        AddPageComponent,
        EditPageComponent,
        OrdersPageComponent,

    ],
    imports:[
        CommonModule,
        RouterModule.forChild([
            {
                path: '', component: AdminLayoutComponent, children: [
                    {path: '', redirectTo: '/admin/login', pathMatch: 'full'},
                    {path: 'login', component: LoginPageComponent},
                    {path: 'dashboard', component: DashboardPageComponent},
                    {path: 'add', component: AddPageComponent},
                    {path: 'orders', component: OrdersPageComponent},
                    {path: 'product/:id/edit', component: EditPageComponent},
                ]
            }
        ])
    ],
    exports: [RouterModule]
})

export class AdminModule{
    
}

According to the lesson, when he goes to the address localhost:4200/admin, he is thrown to the page localhost:4200/admin/login. And throws me to localhost:4200

What did I miss?

The new syntax for lazy loading is loadChildren: () => import('./items/items.module').then(m => m.ItemsModule). Refers to angular.io/guide/lazy-loading-ngmodules. Also, try to replace redirectTo: '/admin/login' with redirectTo: 'login' — Emilien
– Emilien, Commented Nov 9, 2021 at 12:06
Also to generate pages try using the following command: ng g module login --module account --route login. However, remove the imports: [LoginModule] from AccountModule (for example) — Pieterjan
– Pieterjan, Commented Nov 9, 2021 at 12:07

Stoobish · Accepted Answer · 2021-11-09 12:14:53Z

Your app-routing.module.ts should be like this:

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, children: [
      {path: '', redirectTo: '/', pathMatch: 'full'},
      {path: '', component: MainPageComponent},
      {path: 'product/:id', component: ProductPageComponent},
      {path: 'cart', component: CartPageComponent}
    ]
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module#AdminModule').then(m => m.AdminModule)
  }
];

admin.module.ts:

const routes: Routes = [
{
   path: '', component: AdminLayoutComponent, children: [
     {path: '', redirectTo: 'login', pathMatch: 'full'},
     {path: 'login', component: LoginPageComponent},
     {path: 'dashboard', component: DashboardPageComponent},
     {path: 'add', component: AddPageComponent},
     {path: 'orders', component: OrdersPageComponent},
     {path: 'product/:id/edit', component:EditPageComponent},
   ]
}];

Take a look at the documentation: https://angular.io/guide/lazy-loading-ngmodules

Collectives™ on Stack Overflow

Angular routing for the component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related