chore(build): Switch to angular-cli for build pipeline

README.md

@@ -8,7 +8,9 @@ books and add them to their collection. This application utilizes [@ngrx/db](htt
 to persist the collection across sessions; [@ngrx/store](https://github.com/ngrx/store) to manage 
 the state of the app and to cache requests made to the Google Books API; 
 [@angular/router](https://github.com/angular/angular) to manage navigation between routes; 
-and [@ngrx/effects](https://github.com/ngrx/effects) to isolate side effects.
+and [@ngrx/effects](https://github.com/ngrx/effects) to isolate side effects. 
+
+Built with [angular-cli](https://github.com/angular/angular-cli)
 
 ### Included
  - [ngrx/store](https://github.com/ngrx/store) - RxJS powered state management for Angular2 apps, inspired by Redux
@@ -24,14 +26,21 @@ and [@ngrx/effects](https://github.com/ngrx/effects) to isolate side effects.
 # clone the repo
 git clone https://github.com/ngrx/example-app.git
 
+
 # change directory to repo
 cd example-app
 
-# run npm install
+# Use npm or yarn to install the dependencies:
 npm install
 
+# OR
+yarn
+
 # start the server
-npm start
+ng serve
 ```
 
-Navigate to [http://localhost:8080/](http://localhost:8080/) in your browser
+Navigate to [http://localhost:4200/](http://localhost:4200/) in your browser
+
+_NOTE:_ The above setup instructions assume you have added local npm bin folders to your path. 
+If this is not the case you will need to install the angular-cli globally.

angular-cli.json

@@ -0,0 +1,44 @@
+{
+  "project": {
+    "version": "1.0.0-beta.17",
+    "name": "example"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false
+  }
+}

karma.conf.js

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: ['progress', 'karma-remap-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

@@ -4,7 +4,7 @@
   "description": "Example application demoing the @ngrx platform",
   "main": "index.ts",
   "scripts": {
-    "build": "webpack -p --env.prod",
+    "build": "webpack --env.prod",
     "start": "webpack-dev-server"
   },
   "repository": {
@@ -22,17 +22,17 @@
     "npm": ">= 3"
   },
   "dependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/compiler": "^2.0.0",
-    "@angular/compiler-cli": "^0.6.0",
-    "@angular/core": "^2.0.0",
-    "@angular/forms": "^2.0.0",
-    "@angular/http": "^2.0.0",
+    "@angular/common": "^2.1.0",
+    "@angular/compiler": "^2.1.0",
+    "@angular/compiler-cli": "^2.1.0",
+    "@angular/core": "^2.1.0",
+    "@angular/forms": "^2.1.0",
+    "@angular/http": "^2.1.0",
     "@angular/material": "^2.0.0-alpha.9-3",
-    "@angular/platform-browser": "^2.0.0",
-    "@angular/platform-browser-dynamic": "^2.0.0",
-    "@angular/platform-server": "^2.0.0",
-    "@angular/router": "^3.0.0",
+    "@angular/platform-browser": "^2.1.0",
+    "@angular/platform-browser-dynamic": "^2.1.0",
+    "@angular/platform-server": "^2.1.0",
+    "@angular/router": "^3.1.0",
     "@ngrx/core": "^1.0.0",
     "@ngrx/db": "^2.0.0",
     "@ngrx/effects": "^2.0.0",
@@ -42,29 +42,24 @@
     "core-js": "^2.2.2",
     "ngrx-store-freeze": "^0.1.0",
     "rxjs": "^5.0.0-beta.12",
-    "zone.js": "^0.6.12"
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.6.25"
   },
   "devDependencies": {
-    "@ngtools/webpack": "^1.0.0",
-    "@types/hammerjs": "^2.0.32",
-    "awesome-typescript-loader": "^2.2.4",
-    "codelyzer": "^0.0.19",
-    "cpy-cli": "^1.0.1",
-    "css-loader": "^0.25.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.22.0",
-    "json-loader": "^0.5.4",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.4",
-    "source-map-loader": "^0.1.5",
-    "string-replace-loader": "^1.0.3",
-    "style-loader": "^0.13.1",
-    "ts-helpers": "^1.1.1",
-    "ts-node": "^0.7.1",
-    "tslint": "^3.7.1",
-    "tslint-loader": "^2.1.3",
-    "typescript": "2.0.2",
-    "webpack": "^2.1.0-beta.22",
-    "webpack-dev-server": "^2.1.0-beta.4"
+    "@types/jasmine": "^2.2.30",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.17",
+    "codelyzer": "~0.0.26",
+    "jasmine-core": "2.4.1",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
+    "ts-node": "1.2.1",
+    "tslint": "3.13.0",
+    "typescript": "2.0.2"
   }
 }

protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

src/app/components/index.ts

@@ -1,6 +1,6 @@
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@angular/material';
-import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 

src/app/effects/book.ts

@@ -38,7 +38,7 @@ export class BookEffects {
   search$: Observable<Action> = this.actions$
     .ofType(book.ActionTypes.SEARCH)
     .debounceTime(300)
-    .map<string>(action => action.payload)
+    .map((action: book.SearchAction) => action.payload)
     .switchMap(query => {
       if (query === '') {
         return empty();

src/app/guards/book-exists.ts

@@ -57,7 +57,7 @@ export class BookExistsGuard implements CanActivate {
   hasBookInApi(id: string): Observable<boolean> {
     return this.googleBooks.retrieveBook(id)
       .map(bookEntity => new book.LoadAction(bookEntity))
-      .do(action => this.store.dispatch(action))
+      .do((action: book.LoadAction) => this.store.dispatch(action))
       .map(book => !!book)
       .catch(() => {
         this.router.navigate(['/404']);

src/app/index.ts

@@ -0,0 +1 @@
+export * from './app.module';

src/app/reducers/index.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { combineLatest } from 'rxjs/observable/combineLatest';
 import { ActionReducer } from '@ngrx/store';
 import * as fromRouter from '@ngrx/router-store';
+import { environment } from '../../environments/environment';
 import { Book } from '../models/book';
 
 /**
@@ -75,11 +76,11 @@ const reducers = {
   router: fromRouter.routerReducer,
 };
 
-const developmentReducer = compose(storeFreeze, combineReducers)(reducers);
-const productionReducer = combineReducers(reducers);
+const developmentReducer: ActionReducer<State> = compose(storeFreeze, combineReducers)(reducers);
+const productionReducer: ActionReducer<State> = combineReducers(reducers);
 
 export function reducer(state: any, action: any) {
-  if (PROD) {
+  if (environment.production) {
     return productionReducer(state, action);
   }
   else {
@@ -103,7 +104,7 @@ export function reducer(state: any, action: any) {
  * 	}
  * }
  * ```
- * 
+ *
  * Note that this is equivalent to:
  * ```ts
  * class MyComponent {
@@ -112,7 +113,7 @@ export function reducer(state: any, action: any) {
  * 	}
  * }
  * ```
- * 
+ *
  */
  export function getBooksState(state$: Observable<State>) {
   return state$.select(state => state.books);
@@ -127,7 +128,7 @@ export function reducer(state: any, action: any) {
  * first select the books state then we pass the state to the book
  * reducer's getBooks selector, finally returning an observable
  * of search results.
- * 
+ *
  * Share memoizes the selector functions and published the result. This means
  * every time you call the selector, you will get back the same result
  * observable. Each subscription to the resultant observable
@@ -196,4 +197,4 @@ export const isSelectedBookInCollection = function (state$: Observable<State>) {
 export const getLayoutState = (state$: Observable<State>) =>
   state$.select(state => state.layout);
 
-export const getShowSidenav = compose(fromLayout.getShowSidenav, getLayoutState);
+export const getShowSidenav = compose(fromLayout.getShowSidenav, getLayoutState);

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};

src/index.html

@@ -1,18 +1,15 @@
-<!DOCTYPE html>
-<html lang="">
+<!doctype html>
+<html>
 <head>
+  <meta charset="utf-8">
   <title>Book Collection</title>
+  <base href="/">
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="Angular2-Webpack-Lite Boilerplate">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-
 <body>
-  <book-collection-app>
-    Loading...
-  </book-collection-app>
+  <book-collection-app>Loading...</book-collection-app>
 </body>
 </html>

src/main.ts

@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);