Angular lazy-loading implementation for NavMenuComponent component

Question

I have implemented lazy-loading feature in my project by following the approach on official Lazy-loading feature module page. However, I have not idea aboıut how can I treat the modules or components that will not be directed as NavMenuComponent, Sidebar, etc. On the other hand, should I set path: '', for HomeComponent or create a new route for Home?

Here is the points that I confused:

1. I think I do not need to create navmenu-routing.module.ts and navmenu.module.ts as I created for the other routes. Is that true?

2. In the app.module, I defined my NavMenuComponent as shown below. But I am not sure if I should move NavMenuComponent to declarations field?

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    NavMenuComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. In app-routimg.module, I do not use NavMenuComponent. Is it correct?

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./counter/customer.module').then(m => m.CustomerModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./order/order.module').then(m => m.OrderModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

Is there any mistake or anything that I should check?

score 0 · Accepted Answer · answered Sep 30 '20 at 10:36

0

Not really clear about the question, but I sense you are trying to make routing lazy loading work

Your app module and routing module looks correct
Now in the order module, you will have an order-routing.module.ts file where you can define a path such as

  const routes: Routes = [
      {path:'list', component: ListOrdersComponent}
    ];

Now in your nav component you can call the route /order/list which will show the ListOrdersComponent in the router-outlet.

answered Sep 30 '20 at 10:36

maxkart

619
5
21

Thanks for reply. Regardimng to your answer #2, I used it like `const routes: Routes = [ { path: '', component: CounterComponent } ];`. I think it is also correct? – Sep 30 '20 at 10:42
Reagrding to my question #1, I asked if I should create `navmenu-routing.module.ts` and `navmenu.module.ts` as you described in your answer. Because as there is no route for navigation bar directly, I think ı do not need to create `navmenu-routing.module.ts` and `navmenu.module.ts` for this component. Is that true? – Sep 30 '20 at 10:44
Regarding to your answer #3, I call teh related routes via nav-component.html and there is nothing special in nav-component.ts file. I think that is also correct? – Sep 30 '20 at 10:45
for your comments #1 yes correct - you will simple call /counter .. the blank route will render your component. #2 i suggest you keep your nav component in app module .. creating a separate module is an overkill in my view .. #3 yes correct that is only for calling the route – maxkart Sep 30 '20 at 10:49

Angular lazy-loading implementation for NavMenuComponent component

1 Answers1