implement lazy loading

.gitignore

@@ -40,3 +40,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+tools.dev.md

README.md

@@ -40,11 +40,11 @@ If you want to start the project from scratch, it could be easy running this cli
 
 ```
     cd src
-    ng generate module page-one
+    ng generate module page-one --routing
     ng generate component page-one/page-one
     ng generate service page-one/page-one
     ...
-    ng generate module page-[N]
+    ng generate module page-[N]  --routing
     ng generate component page-one/page-[N]
     ng generate service page-one/page-[N]
 ```

package.json

@@ -4,32 +4,34 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --aot",
+    "start-minify": "ng serve --aot --prod",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
+    "@angular/animations": "^6.0.4",
+    "@angular/common": "^6.0.4",
+    "@angular/compiler": "^6.0.4",
+    "@angular/core": "^6.0.4",
+    "@angular/forms": "^6.0.4",
+    "@angular/http": "^6.0.4",
+    "@angular/platform-browser": "^6.0.4",
+    "@angular/platform-browser-dynamic": "^6.0.4",
+    "@angular/router": "^6.0.4",
     "core-js": "^2.4.1",
     "hoek": "^5.0.3",
-    "rxjs": "^5.5.2",
+    "rxjs": "^6.2.1",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.8",
     "@angular/cli": "^6.0.8",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular/compiler-cli": "^6.0.4",
+    "@angular/language-service": "^6.0.4",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
@@ -45,7 +47,6 @@
     "protractor": "^5.3.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.4.2",
-    "@angular-devkit/build-angular": "~0.6.8"
+    "typescript": "~2.7.2"
   }
 }

src/app/app-routing.module.ts

@@ -0,0 +1,32 @@
+import { Routes, RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+export const routes: Routes = [
+  {
+    path: 'page-one',
+    loadChildren: 'modules/page-one/page-one.module#PageOneModule'
+  },
+  {
+    path: 'page-two',
+    loadChildren: 'modules/page-two/page-two.module#PageTwoModule'
+  },
+  {
+    path: 'page-three',
+    loadChildren: 'modules/page-three/page-three.module#PageThreeModule'
+  },
+  {
+    path: 'page-four',
+    loadChildren: 'modules/page-four/page-four.module#PageFourModule'
+  },
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,10 +1,11 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <fieldset >
-    <legend data-qa="appTitle">{{ title }}</legend>
-    <app-page-one></app-page-one>
-    <app-page-two></app-page-two>
-    <app-page-three></app-page-three>
-    <app-page-four></app-page-four>
-  </fieldset>
+  <h1 data-qa="appTitle">{{ title }}</h1>
+  <router-outlet></router-outlet>
+  <span>
+    <button name="back" (click) = "onBack()">Back</button>
+  </span>
+  <span>
+    <button name="next" (click) = "onContinue()">Continue</button>
+  </span>
 </div>