Added pwa capability and updated styling

Author: btroncone

.angular-cli.json

@@ -9,6 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
+        "manifest.json",
         "favicon.ico"
       ],
       "index": "index.html",
@@ -17,9 +18,10 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
+      "prefix": "rx",
+      "serviceWorker": true,
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }

ngsw-manifest.json

@@ -0,0 +1,10 @@
+{
+  "external": {
+    "urls": [
+      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto"},
+      {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+    ]
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -33,10 +34,13 @@
     "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular2-template-loader": "^0.6.2",
     "codelyzer": "~3.1.1",
+    "electron": "^1.6.11",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -48,6 +52,7 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "~2.3.3",
+    "wallaby-webpack": "*"
   }
 }

src/app/app.component.html

@@ -1,16 +1,16 @@
 <md-sidenav-container fullscreen>
-  <md-toolbar color="accent">
-    <button md-button (click)="sidenav.toggle()">
+  <md-toolbar color="accent" class="mat-elevation-z6">
+    <button md-icon-button (click)="sidenav.toggle()">
       <md-icon>
         menu
       </md-icon>
     </button>
-    RxJS Docs
+    <span class="title"> RxJS Docs </span>
   </md-toolbar>
   <md-sidenav #sidenav>
     <md-toolbar>
       <span>
-        <button md-button routerLink="/rxjs">
+        <button md-button routerLink="/">
           Home
         </button>
       </span>
@@ -32,6 +32,6 @@
     </md-toolbar>
   </md-sidenav>
   <div class="body-margin">
-    <router-outlet></router-outlet> 
+    <router-outlet></router-outlet>
   </div>
-</md-sidenav-container>
+</md-sidenav-container>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.title {
+  padding: 0 16px;
+}

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'rx-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app';

src/app/app.component.ts

@@ -2,7 +2,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule } from '@angular/material';
-import { routing } from './app.routing';
+import { RouterModule } from '@angular/router';
+
+import { RXJS_DOC_ROUTES } from './app.routing';
 
 import { AppComponent } from './app.component';
 import { OperatorsComponent } from './operators/operators.component';
@@ -21,7 +23,7 @@ import { RxjsComponent } from './rxjs/rxjs.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    routing,
+    RouterModule.forRoot(RXJS_DOC_ROUTES),
     MdToolbarModule,
     MdSidenavModule,
     MdIconModule,

src/app/app.module.ts

@@ -1,17 +1,15 @@
 import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { CompaniesComponent } from './companies/companies.component';
 import { OperatorsComponent } from './operators/operators.component';
 import { RxjsComponent } from './rxjs/rxjs.component';
 import { TeamComponent } from './team/team.component';
 
-const appRoutes: Routes = [
+export const RXJS_DOC_ROUTES: Routes = [
   { path: '', component: RxjsComponent },
-  { path: 'rxjs', component: RxjsComponent},
   { path: 'operators', component: OperatorsComponent },
   { path: 'team', component: TeamComponent },
-  { path: 'companies', component: CompaniesComponent }
+  { path: 'companies', component: CompaniesComponent },
+  { path: '**', redirectTo: '' }
 ];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);