Hi! You can find a lot of examples on the internet (and on the official doc, of course), but in summary you should:

• In the AppModule’s routing, declare your sub-routes so that they point to a module, like this:

routes = [
{ path: ‘’, component: AppComponent, pathMatch: ‘full’}, // This can also be a lazy module if you want to, using loadChildren

{ path: ‘firstModule’, loadChildren: ‘path-to-first-module#FirstModule’ },

{ path: ‘secondModule’, loadChildren: ‘path-to-second-module#SecondModule’ },

{ path: ‘login’, component: LoginComponent } // this can be a lazy module too
…etc…
]

• Then, each sub module (from above, FirstModule and SecondModule) will have it’s own routes. Since you handle the first part of the url on AppModule, in your sub-modules you’ll do something like this:

// first-module.routing.ts
routes = [ { path: ‘’, component: FirstComponent }]
// second-module.routing.ts
routes = [{ path: ‘’, component: SecondComponent }]

You can play with routes however you like, you can make other sub-modules for those modules playing with other routes or route children.
In your example, you should protect your main route ( / ) with an AuthGuard which checks auth details, if the user is not logged in you redirect him to /login, if he’s logged in he’ll find AppModule’s root route available ( / ) which can for example display AppComponent which has a navbar (or another lazy module if you want, using the same mechanism I wrote above)