Angular modules with subroutes and navbar

Question

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.

• If I add router-outlet to app.component.html, that eg. /login route works fine.
• If I try the same with /admin nothing shows up.

Answer 1

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.