Added routing and layouts modules

src/app/app.component.pug

-// The content below is only a placeholder and can be replaced.
-div(style='text-align:center')
+router-outlet
\ No newline at end of file
-    h1 Welcome to {{ title }}!
-    img(width='300', alt='Angular Logo', src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==')
-h2 Here are some links to help you start:
-ul
-    li
-        h2
-            a(target='_blank', rel='noopener', href='https://angular.io/tutorial') Tour of Heroes
-    li
-        h2
-            a(target='_blank', rel='noopener', href='https://github.com/angular/angular-cli/wiki') CLI Documentation
-    li
-        h2
-            a(target='_blank', rel='noopener', href='https://blog.angular.io/') Angular blog
\ No newline at end of file

src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
+import {LayoutsModule} from './layouts/layouts.module';
+import {RoutesModule} from './routes/routes.module';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent
+    ],
+    imports: [
+        BrowserModule,
+        LayoutsModule,
+        RoutesModule
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/layouts/layouts.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {RoutesModule} from '../routes/routes.module';
+
+import {PublicComponent} from './public/public.component';
+import {ProtectedComponent} from './protected/protected.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RoutesModule
+    ],
+    declarations: [PublicComponent, ProtectedComponent]
+})
+export class LayoutsModule {
+}

src/app/layouts/protected/protected.component.pug

+//below line will be removed with actual layout
+p protected works!
+router-outlet

src/app/layouts/protected/protected.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProtectedComponent } from './protected.component';
+
+describe('ProtectedComponent', () => {
+  let component: ProtectedComponent;
+  let fixture: ComponentFixture<ProtectedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProtectedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProtectedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layouts/protected/protected.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-protected',
+  templateUrl: './protected.component.pug',
+  styleUrls: ['./protected.component.less']
+})
+export class ProtectedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/layouts/public/public.component.pug

+//below line will be removed with actual layout
+p public works!
+router-outlet
\ No newline at end of file

src/app/layouts/public/public.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PublicComponent } from './public.component';
+
+describe('PublicComponent', () => {
+  let component: PublicComponent;
+  let fixture: ComponentFixture<PublicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PublicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layouts/public/public.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-public',
+  templateUrl: './public.component.pug',
+  styleUrls: ['./public.component.less']
+})
+export class PublicComponent implements OnInit {
+
+  constructor(
+      private router: Router,
+  ) { }
+
+  ngOnInit() {
+  }
+
+}

src/app/routes/app.guard.ts

+import {Injectable} from '@angular/core';
+import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+
+@Injectable()
+export class AppGuard implements CanActivate {
+    constructor(private router: Router,
+                public activatedRoute: ActivatedRoute) {
+        // nothing in constructor
+    }
+
+    canActivate(next: ActivatedRouteSnapshot,
+                state: RouterStateSnapshot) {
+        let roles = next.data['roles'];
+        let user: any = {};
+        // specify route protection logic below
+        if (1) {
+            // logged in so return true
+            return true;
+        } else {
+            // not logged in so redirect to login page with the return url
+            return false;
+        }
+    }
+}

src/app/routes/routes.module.ts

+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {AppGuard} from './app.guard';
+
+import {PublicComponent} from '../layouts/public/public.component';
+import {ProtectedComponent} from '../layouts/protected/protected.component';
+
+const routes: Routes = [
+    {
+        path: 'admin',
+        canActivate: [AppGuard],
+        data: {roles: ['admin']},
+        component: ProtectedComponent,
+        children: []
+    },
+    {
+        path: '',
+        component: PublicComponent,
+        children: []
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes)
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: [],
+    providers: [
+        AppGuard
+    ]
+})
+export class RoutesModule {
+}