Multiple master pages in Angular2 and TypeScript Application

Today, I am a cover very hot topic in the market. Which are an Angular2 and TypeScript.

How to create multiple master pages in Angular2 and TypeScript application.

Normally in the application, public and secure pages are there. I mean to access those pages without login its a public and those pages access after the login which is secure.

So we are going to cover public and secure pages master pages.

Let's go step by step to create and configure the application to support multiple master pages.

Step 1: Create Angular2 using angular CLI

Step 2: Once you created the application and its running without any errors.

Step 3: Create layout folder under the src\app folder

Step 4: Once you created layout folder, now time to create public and secure component respectively to create under own folder
 - So your folder structure look like for layout is

1. Src\App\layout\public - Foder public component which represents the public master page.
2. Src\App\layout\secure - Folder secure component which represents secure master pages.

Step 5: Now time to create routes file for each layout folders of public and secure
- Before creating routes file under layout folders, require creating root level public and secure folders for public and secure pages.

- Once you created root level folders for public and secure then we are going to add component respectively login and home page on public and secure folders.

- Let's create routes file for each layout folder and add routing information of both folders.

Step 6: Once routes file created (public,route.ts & secure.route.ts) Now time to configuration time for routing.

1. public.routes.ts file

import { LoginComponent } from './../../public/login';
import { Routes, RouterModule } from '@angular/router';


export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent }
];

2. secure.routes.ts file

import { HomeComponent } from './../../secure/home';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './../../../common/auth.guard';

export const SECURE_ROUTES: Routes = [
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
];

Step 7: Once folder level routes define then we are going to configure root level routing using child routes.
-Going to create root level routes file(app-routing.module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './../common/auth.guard';
import { SecureComponent, SECURE_ROUTES } from './layout/secure';
import { PublicComponent, PUBLIC_ROUTES } from './layout/public';
/**
 * Route constant 
 */
const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [AuthGuard], data: { title: 'Secure Views' }, children: SECURE_ROUTES },
    { path: '**', redirectTo: 'login' }
];

/**
 * App routing module
 */
@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Step 8: Last but important point doesn't forget to add router-outlet tag on following files.
1. app.component.html
2. layout\public\public.component.html
3. layout\secure\secure.component.html

<router-outlet></router-outlet>

You can find source code on my Github repository

Hope you like it and happy coding!!