Update ngrx (#75)

* Upgrade angular-cli and ngrx versions

* Fix new ngrx/store and ngrx/effects

* Fix tests

Author: Nir Galon

.travis.yml

@@ -39,7 +39,7 @@ script:
   # Client
   - cd ../client && npm run lint
   - npm run test
-  - npm run build -- --prod
+  - npm run build
   - cd dist && ws --port 4200&
   - npm run e2e
 

client/.angular-cli.json

@@ -18,6 +18,7 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
+      "serviceWorker": true,
       "styles": [
         "styles.scss"
       ],
@@ -55,6 +56,7 @@
   },
   "defaults": {
     "styleExt": "scss",
-    "component": {}
+    "component": {
+    }
   }
 }

client/.gitignore

@@ -32,6 +32,7 @@
 npm-debug.log
 testem.log
 /typings
+yarn-error.log
 
 # e2e
 /e2e/*.js

client/e2e/app.e2e-spec.ts

@@ -1,9 +1,9 @@
-import { ClientPage } from './app.po';
+import { AppPage } from './app.po';
 
 describe('client App', () => {
-  let page: ClientPage;
+  let page: AppPage;
 
   beforeEach(() => {
-    page = new ClientPage();
+    page = new AppPage();
   });
 });

client/e2e/app.po.ts

@@ -1,6 +1,6 @@
 import { browser, by, element } from 'protractor';
 
-export class ClientPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }

client/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -12,14 +12,6 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [{
-      pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
-      included: true,
-      watched: true
-    }, {
-      pattern: './src/test.ts',
-      watched: false
-    }],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },

client/package.json

@@ -4,45 +4,45 @@
   "license": "ISC",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host=0.0.0.0 --proxy-config proxy.conf.json",
-    "build": "ng build",
+    "start": "ng serve --proxy-config proxy.conf.json --open",
+    "build": "ng build --prod --aot --build-optimizer",
     "test": "ng test --single-run --code-coverage",
     "lint": "ng lint",
-    "e2e": "ng e2e",
-    "sw": "sw-precache --root=dist --config=sw-precache-config.js"
+    "e2e": "ng e2e"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^4.0.0",
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.4",
-    "@ngrx/store": "^2.2.3",
+    "@ngrx/effects": "^4.0.5",
+    "@ngrx/store": "^4.0.3",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "reselect": "^3.0.1",
-    "rxjs": "^5.4.1",
+    "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/cli": "1.2.6",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/language-service": "^4.0.0",
-    "@ngrx/store-devtools": "^3.2.4",
+    "@angular/cli": "1.3.1",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@ngrx/store-devtools": "^4.0.0",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "~3.0.1",
+    "codelyzer": "~3.1.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -53,8 +53,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "ngrx-store-freeze": "^0.1.9",
     "protractor": "~5.1.2",
-    "sw-precache": "^5.2.0",
-    "ts-node": "~3.0.4",
+    "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
     "typescript": "~2.3.3"
   }

client/src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
-
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 
 import { UsersComponent } from './components/users/users.component';
 
@@ -9,9 +8,8 @@ const routes: Routes = [
   { path: 'users', component: UsersComponent },
 ];
 
-
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

client/src/app/app.module.ts

@@ -3,13 +3,15 @@ import 'hammerjs';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
+
+import { MaterialModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { MaterialModule } from '@angular/material';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { reducer } from './reducers';
+import { reducers } from './reducers';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -19,6 +21,8 @@ import { UserEffects } from './effects/user';
 
 import { UserService } from './services/user.service';
 
+import { environment } from '../environments/environment';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -30,9 +34,11 @@ import { UserService } from './services/user.service';
     AppRoutingModule,
     MaterialModule,
     BrowserAnimationsModule,
-    StoreModule.provideStore(reducer),
-    StoreDevtoolsModule.instrumentOnlyWithExtension(),
-    EffectsModule.run(UserEffects),
+    StoreModule.forRoot(reducers),
+    !environment.production ? StoreDevtoolsModule.instrument() : [],
+    EffectsModule.forRoot([
+      UserEffects,
+    ]),
   ],
   providers: [
     UserService,

client/src/app/components/users/users.component.spec.ts

@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { MaterialModule } from '@angular/material';
-import { reducer } from '../../reducers';
+import { reducers } from '../../reducers';
 import { StoreModule } from '@ngrx/store';
 import 'rxjs/add/observable/of';
 
@@ -32,7 +32,7 @@ describe('UsersComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         MaterialModule,
-        StoreModule.provideStore(reducer)
+        StoreModule.forRoot(reducers),
       ],
       declarations: [ UsersComponent ],
       schemas: [ NO_ERRORS_SCHEMA ]