Manage different base layouts in Angular2

Question

In my angularjs application with ui.router I can do following:

$stateProvider
        .state('app', {
            url: '',
            abstract: true,
            template: '<div data-ui-view></div>'
        })
        .state('app.auth', {
            url: '',
            abstract: true,
            controller: 'AuthShellController as vm',
            templateUrl: 'views/auth/auth-shell-view.html'
        })
        .state('app.ui', {
            abstract: true,
            templateUrl: 'views/ui-shell-view.html',
            controller: 'ShellController as vm'

and my angular2 application routes config:

const appRoutes:Routes = <Routes>[
{
    path: '',
    component: DashboardComponent,
},
{
    path: 'login',
    component: LoginComponent,
},
{
    path: 'presentation',
    children: [{
        path: 'new',
        component: PresentationComponent
    }, {
        path: ':id',
        component: PresentationComponent
    }]
},

];

In angularjs I can resolve same url by states, so if I have authorization state I render just login form without header, sidebar.

If I have application state I render shell with header, footer, sidebar and so on.

Question

How can I manage base layouts in angular2 router?

Answer 1

I found a way that works for me to manage base layouts: https://stackblitz.com/github/jbojcic1/angular-routing-example?file=src%2Fapp%2Flayout%2Flayout-routing.module.ts In this example I have featureA and featureB modules which use base layout with header and sidebar and login feature which doesn't use any base layout.

The only thing I don't like here is that each time you add a new module which uses some base layout, you need to modify routing file for that base layout, because this violates open/closed principle.