Multiple layouts in nested routes in Angular (2+)

Question

I\'m creating a Dashboard like application. I\'d like to achieve the following layout plan in Angular (2+):

• route - name - layout
• / - home page - full

Answer 1

Ok I am going to give this a shot...

Routes

Creating routes can be done in multiple ways. You can use child routes or serve the component up directly.

If you want to serve the component up directly this would be ideal,

{ path: '*pathInURL*', component: *NameComponent* }

Direct problems you are facing

Three problems,

1. Show a component as a child.

2. Show a component in a template called fullwidth

3. Show a component in a template called mediumwidth

In your routes.ts

const APP_ROUTES: Routes = [
// landing page of your application
    { path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
    { path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
    { path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
    { path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];

This is going to forward all paths in the URL to look to these routes. It will check the routes to see which template it will fall in.

Then create 3 directories.

/blank

/full

/medium

Inside these folders you will keep your component that use each of the mother templates.

So since login is blank. It would be in /blank

/blank/BlankComonent.ts

Also in each of these directories you will create a routes file which is referred to in the initial routes file we have already created.

/blank/blank.routes.ts

export const BLANK_ROUTES: Routes = [
    { path: 'login', component: LoginComponent }
];

Then in medium the same thing,

/blank/blank.routes.ts

export const MEDIUM_ROUTES: Routes = [
    { path: 'Some/Path', component: SomeMediumComponent }
];

And then the same for FULL_ROUTES

Make a routes file for each directory we created. Add all your routes that live in the same directory and will share the same mother template.

Then we will create a templates directory. Call it /layouts

Now in that direcotry this is where you will create

BlankComponent.ts FullComponent.ts MediumComponent.ts

Each of these components will have their corresponding routes served inside of these templates. Because remember our first routes file says that we will serve all Child Routes to these templates.

So the layouts will be served to the router-outlet

import { Component } from '@angular/core';

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { 
}

Answer 2

You can solve your problem using child routes.

See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example

Set your route like below

const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    // App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

Recommended reference: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html