CODEWITHSUNDEEP
angulartypescriptangular-routing
Perrier
Perrier

Reputation: 2827

Angular modules with subroutes and navbar

I have an application that is seperated into the following modules:

/app
    /core
    /admin
    /authentication
    /wst

Admin is a complex module with sidebar and authentication is just a login screen. I want to load the sidebar only when the admin module is active and I don't want to include it in the app.component.html with an *ngIf.

How can I make such a configuration to work? I'm using Angular7, and started a stackblitz that shows my problem.

Upvotes: 4

Views: 932

Answers (1)

Hongzhi WANG
Hongzhi WANG

Reputation: 1091

If you want ProfileComponent inside AdminComponent, routing for AdminModule should be something like:

const routes: Routes = [
  {
    path: '', component: AdminComponent,
    children: [
      { path: 'profile', component: ProfileComponent }
    ]
  },
]

There are also some build errors to be fixed first:

  • Import AdminRoutingModule instead of RoutingModule in AdminModule.

  • The ProfileComponent should be either declared or imported in AdminModule.

Then /admin/profile should show the AdminComponent with menu and profile. If you want it to be /admin, just add redirection rules to the routes.

Upvotes: 2

Related Questions