upgraded to @ngrx 4, closes #6, closes #7

README.md

@@ -5,11 +5,11 @@
   <img src="https://rawgit.com/colinskow/angular2-webpack-starter/electron/src/assets/img/angular-electron.svg" alt="Angular Electron Dream Starter" width="300" height="300"/>
 </p>
 
-# Angular Electron Dream Starter with Webpack 2
+# Angular Electron Dream Starter with Webpack
 
-> A starter kit for [Electron](https://electron.atom.io) and [Angular 4](https://angular.io) featuring [Webpack 2](https://webpack.js.org), [AoT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) compile, [NGRX Store](https://github.com/ngrx/store), Electron unit tests, native E2E tests in [Spectron](http://electron.atom.io/spectron/), and a powerful development workflow with [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) and [Electron Connect](https://github.com/Quramy/electron-connect).
+> A starter kit for [Electron](https://electron.atom.io) and [Angular 4](https://angular.io) featuring [Webpack 3](https://webpack.js.org), [AoT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) compile, [@ngrx 4](https://github.com/ngrx/platform), Electron unit tests, native E2E tests in [Spectron](http://electron.atom.io/spectron/), and a powerful development workflow with [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) and [Electron Connect](https://github.com/Quramy/electron-connect).
 
-Forked from [AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter).
+Forked from [AngularClass/angular-starter](https://github.com/AngularClass/angular-starter).
 
 I designed this seed repo to demonstrate an ideal development workflow and the most powerful tools for developing desktop applications using Angular and Electron. `npm start` launches a powerful development workflow which uses Hot Module Replacement (HMR) for nearly instant updates inside the browser window, while also restarting your app automatically every time you update the code of the main process.
 

config/webpack.dev.js

@@ -167,7 +167,6 @@ module.exports = function (options) {
             '@angular/platform-browser-dynamic',
             '@angular/router',
             '@angularclass/hmr',
-            '@ngrx/core',
             '@ngrx/effects',
             '@ngrx/router-store',
             '@ngrx/store',

config/webpack.prod.js

@@ -11,10 +11,12 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
 const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
 const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
 
@@ -125,6 +127,28 @@ module.exports = function (env) {
      */
     plugins: [
 
+      /**
+       * Scope Hoisting is the flagship feature of webpack 3. One of webpack’s 
+       * trade-offs when bundling was that each module in your bundle would be 
+       * wrapped in individual function closures. These wrapper functions made 
+       * it slower for your JavaScript to execute in the browser. In comparison, 
+       * tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the 
+       * scope of all your modules into one closure and allow for your code to 
+       * have a faster execution time in the browser.
+       * 
+       * See: https://webpack.js.org/plugins/module-concatenation-plugin/
+       */
+      new ModuleConcatenationPlugin(),
+
+      /**
+       * This plugin will cause hashes to be based on the relative path of the 
+       * module, generating a four character string as the module id. Suggested 
+       * for use in production.
+       * 
+       * See: https://webpack.js.org/plugins/hashed-module-ids-plugin/
+       */
+      new HashedModuleIdsPlugin(),
+
       /**
        * Webpack plugin to optimize a JavaScript file for faster initial load
        * by wrapping eagerly-invoked functions.

package.json

@@ -25,13 +25,13 @@
     "build:renderer:aot:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
     "build:renderer:dev": "webpack --config config/webpack.dev.js --progress --profile",
     "build:renderer:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
-    "build": "npm run build:prod",
+    "build": "npm run build:aot",
     "ci:aot": "npm run test && npm run build:aot && npm run e2e",
     "ci:jit": "npm run test && npm run build:prod && npm run e2e",
     "ci:nobuild": "npm run test && npm run e2e",
     "ci:testall": "npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
     "ci:travis": "npm run test && npm run build:dev && npm run e2e && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
-    "ci": "npm run ci:testall",
+    "ci": "npm run ci:aot",
     "clean:aot": "rimraf compiled",
     "clean:appdata": "electron config/clean-app-data",
     "clean:build": "rimraf dist dev compiled *.temp.json",
@@ -90,17 +90,16 @@
     "@angularclass/conventions-loader": "^1.0.13",
     "@angularclass/hmr": "~2.1.3",
     "@angularclass/hmr-loader": "~3.0.2",
-    "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.3",
-    "@ngrx/router-store": "^1.2.6",
-    "@ngrx/store": "^2.2.2",
-    "@ngrx/store-devtools": "^3.2.4",
+    "@ngrx/effects": "^4.0.5",
+    "@ngrx/router-store": "^4.0.4",
+    "@ngrx/store": "^4.0.3",
+    "@ngrx/store-devtools": "^4.0.0",
     "@types/chai": "^4.0.0",
-    "@types/chai-as-promised": "^0.0.31",
+    "@types/chai-as-promised": "^7.1.0",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "^2.5.51",
     "@types/mocha": "^2.2.41",
-    "@types/node": "^7.0.28",
+    "@types/node": "^8.0.30",
     "@types/source-map": "^0.5.0",
     "@types/uglify-js": "^2.6.29",
     "@types/webdriverio": "^4.7.0",
@@ -123,7 +122,7 @@
     "electron-debug": "^1.4.0",
     "exports-loader": "^0.6.4",
     "expose-loader": "^0.7.3",
-    "express": "^4.15.3",
+    "express": "^4.15.5",
     "extract-text-webpack-plugin": "~3.0.0",
     "file-loader": "^0.11.2",
     "find-root": "^1.0.0",
@@ -146,8 +145,8 @@
     "ncp": "^2.0.0",
     "ng-router-loader": "^2.1.0",
     "ngc-webpack": "~3.2.2",
-    "ngrx-store-freeze": "^0.1.9",
-    "ngrx-store-logger": "^0.1.8",
+    "ngrx-store-freeze": "^0.2.0",
+    "ngrx-store-logger": "^0.2.0",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
     "optimize-js-plugin": "0.0.4",

src/app/app.component.spec.ts

@@ -10,8 +10,7 @@ import { StoreModule } from '@ngrx/store';
 
 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
-import { rootReducer } from './reducers';
-import { HomeActions } from './home/home.actions';
+import { reducers } from './reducers';
 
 describe(`App`, () => {
   let comp: AppComponent;
@@ -21,9 +20,9 @@ describe(`App`, () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ AppComponent ],
-      imports: [ StoreModule.provideStore(rootReducer) ],
+      imports: [ StoreModule.forRoot(reducers) ],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [HomeActions]
+      providers: []
     })
     .compileComponents(); // compile template and css
   }));

src/app/app.component.ts

@@ -12,7 +12,6 @@ import { shell } from 'electron';
 import { AppState } from './reducers';
 import { Store } from '@ngrx/store';
 import { HomeState } from './home/home.reducer';
-import { HomeActions } from './home/home.actions';
 
 /*
  * App Component
@@ -72,10 +71,7 @@ export class AppComponent implements OnInit {
   public url = 'https://github.com/colinskow/angular-electron-dream-starter';
   public state$: Observable<HomeState>;
 
-  constructor(
-    private store: Store<AppState>,
-    private homeActions: HomeActions,
-  ) {
+  constructor(private store: Store<AppState>) {
     this.state$ = this.store.select(state => state.home);
   }
 

src/app/app.module.ts

@@ -16,7 +16,10 @@ import {
 } from '@angular/router';
 
 import { EffectsModule } from '@ngrx/effects';
-import { RouterStoreModule } from '@ngrx/router-store';
+import {
+  RouterStateSerializer,
+  StoreRouterConnectingModule
+} from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { Store } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -26,14 +29,17 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
  */
 import { ENV_PROVIDERS } from './environment';
 import { ROUTES } from './app.routes';
-import { rootReducer } from './reducers';
+import {
+  reducers,
+  metaReducers,
+  AppState,
+  CustomSerializer
+} from './reducers';
 // App is our top level component
 import { AppComponent } from './app.component';
 import { APP_BASE_HREF } from '@angular/common';
 import { APP_RESOLVER_PROVIDERS } from './app.resolver';
-import { AppState } from './reducers';
 import { HomeComponent } from './home';
-import { HomeActions } from './home/home.actions';
 import { AboutComponent } from './about';
 import { NoContentComponent } from './no-content';
 import { XLargeDirective } from './home/x-large';
@@ -46,8 +52,8 @@ declare const ENV: string;
 // Application wide providers
 const APP_PROVIDERS = [
   ...APP_RESOLVER_PROVIDERS,
-  HomeActions,
-  { provide: APP_BASE_HREF, useValue : '/' }
+  { provide: APP_BASE_HREF, useValue : '/' },
+  { provide: RouterStateSerializer, useClass: CustomSerializer }
 ];
 
 interface InternalStateType {
@@ -65,7 +71,10 @@ let CONDITIONAL_IMPORTS = [];
 
 if (ENV === 'development') {
   console.log('loading react devtools');
-  CONDITIONAL_IMPORTS.push(StoreDevtoolsModule.instrumentOnlyWithExtension());
+  CONDITIONAL_IMPORTS.push(StoreDevtoolsModule.instrument());
+  // AoT won't allow metaReducers, so we need to add them conditionally
+  // this should override the previous StoreModule declaration
+  CONDITIONAL_IMPORTS.push(StoreModule.forRoot(reducers, { metaReducers }));
 }
 
 /**
@@ -84,8 +93,8 @@ if (ENV === 'development') {
     BrowserModule,
     FormsModule,
     HttpModule,
-    StoreModule.provideStore(rootReducer),
-    RouterStoreModule.connectRouter(),
+    StoreModule.forRoot(reducers),
+    StoreRouterConnectingModule,
     RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules }),
     ...CONDITIONAL_IMPORTS
   ],

src/app/home/home.actions.ts

@@ -2,15 +2,12 @@ import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Action } from '@ngrx/store';
 
-@Injectable()
+export const SET_VALUE = '[Home] Set Value';
 
-export class HomeActions {
+export class SetValue implements Action {
+  public readonly type = SET_VALUE;
 
-  public static SET_VALUE = '[Home] Set Value';
-  public setValue(value: string): Action {
-    return {
-      type: HomeActions.SET_VALUE,
-      payload: value
-    };
-  }
+  constructor(public payload: string) {}
 }
+
+export type Actions = SetValue;

src/app/home/home.component.spec.ts

@@ -16,8 +16,7 @@ import { MockBackend } from '@angular/http/testing';
 import { StoreModule } from '@ngrx/store';
 
 // Load the implementations that should be tested
-import { rootReducer } from '../reducers';
-import { HomeActions } from './home.actions';
+import { reducers } from '../reducers';
 import { HomeComponent } from './home.component';
 import { Title } from './title';
 
@@ -29,7 +28,7 @@ describe(`Home`, () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [HomeComponent],
-      imports: [StoreModule.provideStore(rootReducer)],
+      imports: [StoreModule.forRoot(reducers)],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         BaseRequestOptions,
@@ -41,7 +40,6 @@ describe(`Home`, () => {
           },
           deps: [MockBackend, BaseRequestOptions]
         },
-        HomeActions,
         Title,
       ]
     })

src/app/home/home.component.ts

@@ -7,7 +7,7 @@ import { ipcRenderer } from 'electron';
 import { Store } from '@ngrx/store';
 import { AppState } from '../reducers';
 import { HomeState } from './home.reducer';
-import { HomeActions } from './home.actions';
+import * as home from './home.actions';
 import { Title } from './title';
 import { XLargeDirective } from './x-large';
 
@@ -31,7 +31,6 @@ export class HomeComponent implements OnInit {
   // TypeScript public modifiers
   constructor(
     private store: Store<AppState>,
-    private homeActions: HomeActions,
     public title: Title
   ) {}
 
@@ -42,7 +41,7 @@ export class HomeComponent implements OnInit {
 
   public submitState(value: string) {
     console.log('submitState', value);
-    this.store.dispatch(this.homeActions.setValue(value));
+    this.store.dispatch(new home.SetValue(value));
     this.localState.value = '';
   }
 

src/app/home/home.reducer.ts

@@ -1,17 +1,17 @@
 import { Action } from '@ngrx/store';
 
-import { HomeActions } from './home.actions';
+import * as home from './home.actions';
 
 export interface HomeState {
   value?: string;
 }
 
 export const initialState: HomeState = {};
 
-export function homeReducer(state = initialState, action: Action): HomeState {
+export function homeReducer(state = initialState, action: home.Actions): HomeState {
   switch (action.type) {
 
-    case HomeActions.SET_VALUE: {
+    case home.SET_VALUE: {
       return Object.assign({}, state, {
         value: action.payload
       });