feat: migrate to angular 4.3 and ngrx 4

package.json

@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "test": "npm run lint && ng test --single-run",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "watch": "ng test --browsers PhantomJS --reporters spec",
@@ -15,37 +15,39 @@
     "clean": "rm -rf ./dist/",
     "server": "cd dist && http-server",
     "prod": "npm run clean && npm run build:prod && npm run server",
-    "ci": "npm run clean && ng lint && ng test --browsers PhantomJS --single-run --reporters spec && npm run build:travisci"
+    "ci": "npm run clean && ng lint && ng test --browsers PhantomJS --single-run --reporters spec && npm run build:travisci",
+    "release": "standard-version && git push --follow-tags origin master"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.1.1",
-    "@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/material": "^2.0.0-beta.3",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
-    "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.3",
-    "@ngrx/store": "^2.2.2",
+    "@angular/animations": "^4.3.0",
+    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/common": "^4.3.0",
+    "@angular/compiler": "^4.3.0",
+    "@angular/core": "^4.3.0",
+    "@angular/forms": "^4.3.0",
+    "@angular/http": "^4.3.0",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "^4.3.0",
+    "@angular/platform-browser-dynamic": "^4.3.0",
+    "@angular/router": "^4.3.0",
+    "@ngrx/store": "github:ngrx/store-builds",
+    "@ngrx/effects": "github:ngrx/effects-builds",
+    "@ngrx/router-store": "github:ngrx/router-store-builds",
     "@types/node-uuid": "0.0.28",
     "bootstrap": "^4.0.0-alpha.6",
     "classlist.js": "^1.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "intl": "^1.2.5",
     "node-uuid": "^1.4.8",
-    "rxjs": "^5.1.0",
+    "rxjs": "^5.4.2",
     "web-animations-js": "^2.2.5",
-    "zone.js": "^0.8.4"
+    "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.3",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/cli": "1.3.0-beta.1",
+    "@angular/compiler-cli": "^4.3.0",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",
@@ -60,8 +62,9 @@
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-spec-reporter": "0.0.31",
     "protractor": "~5.1.0",
+    "standard-version": "^4.2.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "typescript": "~2.3.0"
   }
 }

src/app/app.component.html

@@ -46,7 +46,9 @@
           </button>
         </md-menu>
 
-        <a md-icon-button class="link" href="https://github.com/tomastrajan/angular-ngrx-material-starter" target="_blank">
+        <a mdTooltip="Project Github Repository"
+           mdTooltipPosition="before"
+           md-icon-button class="link" href="https://github.com/tomastrajan/angular-ngrx-material-starter" target="_blank">
           <i class="fa fa-github fa-2x"></i>
         </a>
 
@@ -88,8 +90,13 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-12">
+        <div class="col-12 signature">
           &#169; {{year}} - Tomas Trajan
+          <a mdTooltip="Show changelog"
+             mdTooltipPosition="before"
+             href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
+            <i class="fa fa-rocket"></i> {{version}}
+          </a>
         </div>
       </div>
     </div>

src/app/app.component.scss

@@ -41,42 +41,52 @@ $footer-height: 140px;
   .row {
     padding: 10px 0;
 
-    a {
-      transition: padding 0.5s;
-      display: inline-block;
-      padding: 20px 5px;
 
-      &:hover {
-        text-decoration: none;
-      }
-
-      span {
+    .links {
+      a {
+        transition: padding 0.5s;
         display: inline-block;
-        width: 70px;
-        padding: 0 0 0 5px;
-        overflow: hidden;
-        text-align: left;
-        white-space: nowrap;
-        transition: width 0.5s;
-      }
-    }
+        padding: 20px 5px;
 
-    @media (max-width: map-get($grid-breakpoints, md)) {
-      a {
-        padding: 20px;
+        &:hover {
+          text-decoration: none;
+        }
 
         span {
-          width: 0;
-          padding: 0;
+          display: inline-block;
+          width: 70px;
+          padding: 0 0 0 5px;
+          overflow: hidden;
+          text-align: left;
+          white-space: nowrap;
+          transition: width 0.5s;
+        }
+      }
+
+      @media (max-width: map-get($grid-breakpoints, md)) {
+        a {
+          padding: 20px;
+
+          span {
+            width: 0;
+            padding: 0;
+          }
+        }
+      }
+
+      @media (max-width: map-get($grid-breakpoints, sm)) {
+        a {
+          padding: 20px 5px;
         }
       }
     }
 
-    @media (max-width: map-get($grid-breakpoints, sm)) {
+    .signature {
       a {
-        padding: 20px 5px;
+        float: right;
       }
     }
+
   }
 }
 

src/app/app.component.scss-theme.scss

@@ -29,7 +29,7 @@
     color: mat-color($primary, lighter);
     background-color: mat-color($primary, darker);
 
-    .links {
+    .links, .signature {
       a {
         color: mat-color($primary, lighter);
         &:hover {

src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { SharedModule } from './shared';
-import { CoreModule } from './core';
+import { SharedModule } from '@app/shared';
+import { CoreModule } from '@app/core';
 
 import { AppComponent } from './app.component';
 

src/app/app.component.ts

@@ -4,6 +4,11 @@ import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/filter';
+
+import { environment as env } from '@env/environment';
+
+import { selectorSettings } from './settings';
 
 @Component({
   selector: 'anms-root',
@@ -13,6 +18,7 @@ import 'rxjs/add/operator/map';
 export class AppComponent implements OnDestroy {
 
   themeClass: string;
+  version = env.versions.app;
   year = new Date().getFullYear();
 
   private unsubscribe$: Subject<void> = new Subject<void>();
@@ -29,7 +35,7 @@ export class AppComponent implements OnDestroy {
     private store: Store<any>
   ) {
     store
-      .select('settings')
+      .select(selectorSettings)
       .takeUntil(this.unsubscribe$)
       .map(({ theme }) => theme.toLowerCase())
       .subscribe(theme => {

src/app/app.module.ts

@@ -1,11 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
-import { HttpModule } from '@angular/http';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
 
-import { SharedModule } from './shared/shared.module';
+import { SharedModule } from '@app/shared';
+import { CoreModule } from '@app/core';
 
-import { CoreModule } from './core';
 import { SettingsModule } from './settings';
 import { StaticModule } from './static';
 
@@ -17,7 +18,6 @@ import { AppComponent } from './app.component';
     // angular
     BrowserAnimationsModule,
     BrowserModule,
-    HttpModule,
 
     // core & shared
     CoreModule,
@@ -28,7 +28,7 @@ import { AppComponent } from './app.component';
     SettingsModule,
 
     // app
-    AppRoutingModule
+    AppRoutingModule,
   ],
   declarations: [
     AppComponent

src/app/core/core.interfaces.ts

@@ -0,0 +1,4 @@
+export interface Action {
+  type: string;
+  payload: any;
+}

src/app/core/core.module.ts

@@ -1,34 +1,24 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
-import { StoreModule, combineReducers, ActionReducer } from '@ngrx/store';
-
-import { settingsReducer } from '../settings';
 
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
 import { LocalStorageService } from './local-storage/local-storage.service';
-import {
-  localStorageInitStateMiddleware
-} from './local-storage/local-storage.middleware';
 
-export function createReducer(asyncReducers = {}): ActionReducer<any> {
-  return localStorageInitStateMiddleware(
-    combineReducers(Object.assign({
-      settings: settingsReducer
-    }, asyncReducers))
-  );
-}
-
-const reducer = createReducer();
-
-export function reducerAoT(state, action) {
-  return reducer(state, action);
+export function getInitialState() {
+  return LocalStorageService.loadInitialState();
 }
 
 @NgModule({
   imports: [
+    // angular
     CommonModule,
     HttpModule,
-    StoreModule.provideStore(reducerAoT)
+
+    // ngrx
+    StoreModule.forRoot({}, { initialState: getInitialState }),
+    EffectsModule.forRoot([]),
   ],
   declarations: [],
   providers: [LocalStorageService]

src/app/core/index.ts

@@ -1,3 +1,3 @@
 export * from './local-storage/local-storage.service';
-export * from './local-storage/local-storage.middleware';
+export * from './core.interfaces';
 export * from './core.module';

src/app/core/local-storage/local-storage.service.ts

@@ -17,11 +17,21 @@ export class LocalStorageService {
 
   static loadInitialState() {
     return Object.keys(localStorage)
-      .reduce((state: any, key) => {
-        if (key.includes(APP_PREFIX)) {
+      .reduce((state: any, storageKey) => {
+        if (storageKey.includes(APP_PREFIX)) {
           state = state || {};
-          const stateKey = key.replace(APP_PREFIX, '').toLowerCase();
-          state[stateKey] = JSON.parse(localStorage.getItem(key));
+          const stateKey = storageKey.replace(APP_PREFIX, '').toLowerCase()
+            .split('.');
+          let currentStateRef = state;
+          stateKey.forEach((key, index) => {
+            if (index === stateKey.length - 1) {
+              currentStateRef[key] = JSON
+                .parse(localStorage.getItem(storageKey));
+              return;
+            }
+            currentStateRef[key] = currentStateRef[key] || {};
+            currentStateRef = currentStateRef[key];
+          });
         }
         return state;
       }, undefined);