angular 4 source: https://stackoverflow.com/questions/45776792/how-to-use-a-default-routes-for-login-screen-angular-4
Notice this is the same as before. There is another router-outlet which refers to the routes of the nested children in MainComponent. Views from HomeComponent, DownloadComponent, and CompareComponent will go in here.
Cheers!
<div class="all-wrapper menu-side with-side-panel">
<div class="layout-w">
<mw-side-menu class="desktop-menu menu-side-w menu-activated-on-click"></mw-side-menu>
<div class="content-w">
<mw-header-menu></mw-header-menu>
<div class="content-i">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
Notice we only place router-outlet, which will hold the view for either MainComponent or LoginComponent, which can be separate
Then in MainComponent:
<router-outlet></router-outlet>
The key here is that the Routes can have children which is an array of Routes as you can see.
Your app.component.html can look like this:
export const ROUTES: Routes = [
{
path: '',
component: MainComponent,
children: [
{ path: '', component: HomeComponent },
{ path: 'download', component: DownloadComponent },
{ path: 'compare', component: CompareComponent }
]
},
{ path: 'login', component: LoginComponent },
]
One quick way I can think of is to change the structure of your routes to something like this: