Angular2 - Shared Layout for multiple modules

Question

I build an Angular application with different modules. Each module handles distinct tasks. On my landing page, the user should login or register. It\'s a very lean layout wi

Answer 1

You can use parent/children routing to achieve this. Something like this should work (may need some tweaking depends on the other parts of your project)

const routes: Routes = [
    {
        path: 'auth',
        component: Layout1
        canActivate: [NotLoggedInGuard],
        children: [
           { path: '', component: PublicAuthComponent }
        ]
    },
    {
        path: '',
        component: Layout2,
        canActivate: [LoggedInGuard],
        children: [
          { path: '', loadChildren: './path/to/module/feature.module#FeatureModule' }
        ]
    }
];

Remember to put <router-outlet> inside both of Layout components.