Added initial Angular Playground functionality

.angular-cli.json

@@ -27,6 +27,24 @@
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
+    },
+    {
+      "name": "playground",
+      "root": "src",
+      "outDir": "dist-playground",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.playground.ts",
+      "polyfills": "polyfills.ts",
+      "tsconfig": "tsconfig.app.json",
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "e2e": {

.gitignore

@@ -1,6 +1,7 @@
 # NPM
 node_modules
 npm-debug.log
+sandboxes.ts
 
 # Code Editor Settings
 .idea

.vscode/settings.json

@@ -8,6 +8,5 @@
       "**/config/*.js": {
         "when": "$(basename).js.map"
       }
-    },
-    "typescript.check.tscVersion": false
+    }
 }

README.md

@@ -51,4 +51,11 @@ screenshots from the app:
 
 <img width="500" src="src/assets/images/screenshots/details.png" border="0" />
 
+## Running Angular Playground
+
+This application includes Angular Playground (http://www.angularplayground.it) which provides a great way to isolate components in a sandbox rather than loading the 
+entire application to see a given component. To run the playground run the following command:
+
+`npm run playground`
+
 

angular-playground.json

@@ -0,0 +1,6 @@
+{
+    "sourceRoot": "./src",
+    "angularCli": {
+      "appName": "playground"
+    }
+}

package.json

@@ -8,7 +8,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "playground": "angular-playground"
   },
   "private": true,
   "dependencies": {
@@ -31,9 +32,11 @@
     "@angular/cli": "1.5.0",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
+    "@types/googlemaps": "3.29.1",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular-playground": "^2.3.0",
     "codelyzer": "~3.2.0",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
@@ -46,7 +49,6 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.4.2",
-    "@types/googlemaps": "3.29.1"
+    "typescript": "~2.4.2"
   }
 }

src/app/about/about.component.sandbox.ts

@@ -0,0 +1,7 @@
+import { sandboxOf } from 'angular-playground';
+import { AboutComponent } from './about.component';
+
+export default sandboxOf(AboutComponent)
+  .add('About Component', {
+    template: `<cm-about>Hey playground!</cm-about>`
+  });

src/app/customer/customer-details.component.sandbox.ts

@@ -0,0 +1,33 @@
+import { sandboxOf } from 'angular-playground';
+import { SharedModule } from '../shared/shared.module';
+import { CoreModule } from '../core/core.module';
+import { DataService } from '../core/services/data.service';
+import { CustomerDetailsComponent } from './customer-details.component';
+import { MockDataService, MockActivatedRoute, getActivatedRouteWithParent } from '../shared/mocks';
+import { ActivatedRoute } from '@angular/router';
+
+const sandboxConfig = {
+  imports: [ SharedModule, CoreModule ],
+  providers: [
+      { provide: DataService, useClass: MockDataService },
+      { provide: ActivatedRoute, useFactory: () => { 
+        let route = getActivatedRouteWithParent([{ id: '1' }]);  
+        return route;
+      }}
+  ],
+  label: 'Customer Details Component'
+};
+
+export default sandboxOf(CustomerDetailsComponent, sandboxConfig)
+  .add('With a Customer', {
+    template: `<cm-customer-details></cm-customer-details>`    
+  })
+  .add('Without a Customer', {
+    template: `<cm-customer-details></cm-customer-details>`,
+    providers: [
+      { provide: ActivatedRoute, useFactory: () => { 
+        let route = getActivatedRouteWithParent([{ id: null }]);  
+        return route;
+      }}
+    ]   
+  });

src/app/customer/customer-orders.component.sandbox.ts

@@ -0,0 +1,31 @@
+import { sandboxOf } from 'angular-playground';
+import { SharedModule } from '../shared/shared.module';
+import { CoreModule } from '../core/core.module';
+import { DataService } from '../core/services/data.service';
+import { CustomerOrdersComponent } from './customer-orders.component';
+import { MockDataService, MockActivatedRoute, getActivatedRouteWithParent } from '../shared/mocks';
+import { ActivatedRoute } from '@angular/router';
+
+const sandboxConfig = {
+  imports: [ SharedModule, CoreModule ],
+  providers: [
+      { provide: DataService, useClass: MockDataService },
+      { provide: ActivatedRoute, useFactory: () => { 
+        let route = getActivatedRouteWithParent([{ id: '1' }]);  
+        return route;
+      }}
+  ],
+  label: 'Customer Orders Component'
+};
+
+export default sandboxOf(CustomerOrdersComponent, sandboxConfig)
+  .add('With Orders', {
+    template: `<cm-customer-orders></cm-customer-orders>` 
+  })
+  .add('Without Orders', {
+    template: `<cm-customer-orders></cm-customer-orders>`,
+    providers: [ { provide: ActivatedRoute, useFactory: () => { 
+      let route = getActivatedRouteWithParent([{ id: null }]);  
+      return route;
+    }}]   
+  });

src/app/shared/mocks.ts

@@ -0,0 +1,68 @@
+import { ActivatedRouteSnapshot, ActivatedRoute, UrlSegment, Params, Data, Route, ParamMap } from "@angular/router";
+import { Observable } from "rxjs/Observable";
+import { Type } from "@angular/core";
+import { ICustomer } from "./interfaces";
+
+export class MockDataService {
+    getCustomer(id: number) : Observable<ICustomer> {
+        console.log(id);
+        if (id === 1) {
+            return Observable.of({
+                "id": 1,
+                "firstName": "ted",
+                "lastName": "james",
+                "gender": "male",
+                "address": "1234 Anywhere St.",
+                "city": " Phoenix ",
+                "state": {
+                    "abbreviation": "AZ",
+                    "name": "Arizona"
+                },
+                "orders": [
+                    {"productName": "Basketball", "itemCost": 7.99},
+                    {"productName": "Shoes", "itemCost": 199.99}
+                ],
+                "latitude": 33.299,
+                "longitude": -111.963
+            });
+        } 
+        else {
+            return Observable.of(null);
+        }
+    }
+  }
+
+  export class MockActivatedRoute implements ActivatedRoute {
+    snapshot : ActivatedRouteSnapshot;
+    url : Observable<UrlSegment[]>;
+    params : Observable<Params>;
+    queryParams : Observable<Params>;
+    fragment : Observable<string>;
+    data : Observable<Data>;
+    outlet : string;
+    component : Type<any>|string;
+    routeConfig : Route;
+    root : ActivatedRoute;
+    parent : ActivatedRoute;
+    firstChild : ActivatedRoute;
+    children : ActivatedRoute[];
+    pathFromRoot : ActivatedRoute[];
+    paramMap: Observable<ParamMap>;
+    queryParamMap: Observable<ParamMap>;
+    toString() : string{
+        return "";
+    };
+  }
+
+  export function getActivatedRouteWithParent(params: any[]) {
+    const route = new MockActivatedRoute();
+    route.parent = new MockActivatedRoute();
+    if (params) {
+        for (const param of params) {
+            //var keyNames = Object.keys(param);
+            route.parent.params = Observable.of(param);
+        }
+    }
+
+    return route;
+  }

src/main.playground.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { initializePlayground, PlaygroundModule } from 'angular-playground';
+
+initializePlayground('cm-app-component');
+platformBrowserDynamic().bootstrapModule(PlaygroundModule);

src/tsconfig.app.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "es2015",
+    "module": "esnext",
     "types": []
   },
   "exclude": [