CODEWITHSUNDEEP
angulartypescriptangular7
Adam
Adam

Reputation: 4174

Routing for Angular with common layout for some feature modules

I have an Angular 7 app with 3 user roles, A, B & C. A & B share the same visual layout but the menu items change (theme and structure are the same, data is different). C has a completely different layout.

My application has AppModule, SharedModule, CoreModule, HomeModule, AModule, BModule & CModule. My common layout lives in a component called CommonLayoutComponent which is exported from SharedModule and it is used in Modules A and B.

The workflow: the user lands on a home page that has three button, which will route to modules, A, B and C. Or she might navigate directly to the right module by bookmarking the relevant URL.

My app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'a', component: AComponent },
  { path: 'b', component: BComponent },
  { path: 'c', component: CComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Questions:

  1. Should I still bootstrap AppComponent in my AppModule even though I am not doing anything in this component except having <router-outlet></router-outlet> in the app.component.html ?
  2. How can I treat my CommonLayoutComponent as a master/layout page (like ASP.NET MVC layout page) and pop my <router-outlet></router-outlet> inside it for modules A and B?

Upvotes: 2

Views: 940

Answers (1)

Mujadid Mughal
Mujadid Mughal

Reputation: 2663

Since you want to keep same layout for A and B, make them child routes and put layout related html + an additional router-outlet inside CommonLayoutComponent component. Something like this..

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { 
        path: '', 
        component: CommonLayoutComponent,
        children: [
            { path: 'a', component: AComponent },
            { path: 'b', component: BComponent },
        ]
    },
    { path: 'c', component: CComponent }
];

Upvotes: 2

Related Questions