feat(angular): Drop Angular v4 support, add Angular v6 support

BREAKING CHANGE: RxJS v6 and Angular v5 or higher is now required to use this package.

If using Angular v5, you should update to `"rxjs": "^6.0.0"` and also add `"rxjs-compat": "^6.0.0"`.

Closes #301

Author: Matt Lewis

karma.conf.js

@@ -1,15 +1,16 @@
 // Karma configuration file
 var karma = require('karma');
+var webpack = require('webpack');
 
-module.exports = function (karma) {
+module.exports = function(karma) {
   var config = {
     singleRun: true,
     autoWatch: false,
     autoWatchInterval: 0,
 
     // level of logging
     // possible values: LOG_DISABLE, LOG_ERROR, LOG_WARN, LOG_INFO, LOG_DEBUG
-    logLevel: "warn",
+    logLevel: 'warn',
     // possible values: 'dots', 'progress'
     reporters: ['super-dots', 'mocha'],
     colors: true,
@@ -27,7 +28,7 @@ module.exports = function (karma) {
     // Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
     browsers: ['ChromeHeadlessNoSandbox'],
     customLaunchers: {
-      ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', flags: ['--no-sandbox'] }
+      ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', flags: ['--no-sandbox'] },
     },
 
     frameworks: ['jasmine'],
@@ -38,29 +39,30 @@ module.exports = function (karma) {
       require('karma-super-dots-reporter'),
       require('karma-mocha-reporter'),
       require('karma-jasmine'),
-      require('karma-chrome-launcher')
+      require('karma-chrome-launcher'),
     ],
 
     webpack: {
       devtool: 'eval',
 
       resolve: {
         modules: ['node_modules'],
-        extensions: ['.js', '.ts']
+        extensions: ['.js', '.ts'],
       },
 
       module: {
         rules: [
           {
             test: /\.ts$/,
-            loader: "ts-loader",
+            loader: 'ts-loader',
             options: {
-              configFile: "test/tsconfig.json",
-            }
-          }
-        ]
+              configFile: 'test/tsconfig.json',
+            },
+          },
+        ],
       },
 
+      plugins: [new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)fesm5/, __dirname + '/src')],
     },
 
     webpackMiddleware: {
@@ -72,9 +74,7 @@ module.exports = function (karma) {
     preprocessors: {
       'test/index.js': ['webpack', 'sourcemap'],
     },
-
   };
 
   karma.set(config);
 };
-

package.json

@@ -50,22 +50,23 @@
   "typings": "lib/index.d.ts",
   "dependencies": {
     "@uirouter/core": "5.0.18",
-    "@uirouter/rx": "0.4.5"
+    "@uirouter/rx": "0.5.0-alpha.1"
   },
   "peerDependencies": {
-    "@angular/common": "^4.0.0 || ^5.0.0",
-    "@angular/core": "^4.0.0 || ^5.0.0",
-    "@angular/router": "^4.0.0 || ^5.0.0"
+    "@angular/common": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/router": "^6.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/platform-server": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/platform-server": "^6.0.0",
+    "@angular/router": "^6.0.0",
     "@types/jasmine": "^2.8.6",
     "@types/jquery": "^3.3.1",
     "@uirouter/publish-scripts": "^2.3.4",
@@ -85,13 +86,13 @@
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-uglify": "^3.0.0",
-    "rxjs": "^5.5.8",
+    "rxjs": "^6.1.0",
     "shelljs": "^0.8.1",
     "shx": "^0.2.2",
     "ts-loader": "^3.5.0",
     "tslib": "^1.9.0",
     "tslint": "^5.9.1",
-    "typescript": "^2.8.3",
+    "typescript": "~2.7.2",
     "webpack": "^3.11.0",
     "webpack-dev-server": "^3.1.4",
     "zone.js": "^0.8.20"

src/directives/uiSref.ts

@@ -13,8 +13,7 @@ import {
   HostListener,
 } from '@angular/core';
 import { UIView, ParentUIViewInject } from './uiView';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { Subscription } from 'rxjs/Subscription';
+import { ReplaySubject, Subscription } from 'rxjs';
 
 /**
  * @internalapi

src/directives/uiSrefActive.ts

@@ -1,7 +1,7 @@
 /** @ng2api @module directives */ /** */
-import { Directive, Input, ElementRef, Host, Renderer } from '@angular/core';
+import { Directive, Input, ElementRef, Host, Renderer2 } from '@angular/core';
 import { UISrefStatus, SrefStatus } from './uiSrefStatus';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 /**
  * A directive that adds a CSS class when its associated `uiSref` link is active.
@@ -98,10 +98,22 @@ export class UISrefActive {
   }
 
   private _subscription: Subscription;
-  constructor(uiSrefStatus: UISrefStatus, rnd: Renderer, @Host() host: ElementRef) {
+  constructor(uiSrefStatus: UISrefStatus, rnd: Renderer2, @Host() host: ElementRef) {
     this._subscription = uiSrefStatus.uiSrefStatus.subscribe((next: SrefStatus) => {
-      this._classes.forEach(cls => rnd.setElementClass(host.nativeElement, cls, next.active));
-      this._classesEq.forEach(cls => rnd.setElementClass(host.nativeElement, cls, next.exact));
+      this._classes.forEach(cls => {
+        if (next.active) {
+          rnd.addClass(host.nativeElement, cls);
+        } else {
+          rnd.removeClass(host.nativeElement, cls);
+        }
+      });
+      this._classesEq.forEach(cls => {
+        if (next.exact) {
+          rnd.addClass(host.nativeElement, cls);
+        } else {
+          rnd.removeClass(host.nativeElement, cls);
+        }
+      });
     });
   }
 

src/directives/uiSrefStatus.ts

@@ -14,19 +14,10 @@ import {
   UIRouterGlobals,
   Param,
   PathUtils,
-  StateOrName,
 } from '@uirouter/core';
 
-import { Subscription } from 'rxjs/Subscription';
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-import { of } from 'rxjs/observable/of';
-import { fromPromise } from 'rxjs/observable/fromPromise';
-import { combineLatest } from 'rxjs/observable/combineLatest';
-import { switchMap } from 'rxjs/operator/switchMap';
-import { map } from 'rxjs/operator/map';
-import { concat } from 'rxjs/operator/concat';
+import { Subscription, Observable, BehaviorSubject, of, from, combineLatest, concat } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
 
 /** @internalapi */
 interface TransEvt {
@@ -223,35 +214,41 @@ export class UISrefStatus {
   ngAfterContentInit() {
     // Map each transition start event to a stream of:
     // start -> (success|error)
-    const transEvents$: Observable<TransEvt> = switchMap.call(this._globals.start$, (trans: Transition) => {
-      const event = (evt: string) => ({ evt, trans } as TransEvt);
+    const transEvents$: Observable<TransEvt> = this._globals.start$.pipe(
+      switchMap((trans: Transition) => {
+        const event = (evt: string) => ({ evt, trans } as TransEvt);
 
-      const transStart$ = of(event('start'));
-      const transResult = trans.promise.then(() => event('success'), () => event('error'));
-      const transFinish$ = fromPromise(transResult);
+        const transStart$ = of(event('start'));
+        const transResult = trans.promise.then(() => event('success'), () => event('error'));
+        const transFinish$ = from(transResult);
 
-      return concat.call(transStart$, transFinish$);
-    });
+        return concat(transStart$, transFinish$);
+      }),
+    );
 
     // Watch the @ContentChildren UISref[] components and get their target states
 
     // let srefs$: Observable<UISref[]> = of(this.srefs.toArray()).concat(this.srefs.changes);
     this._srefs$ = new BehaviorSubject(this._srefs.toArray());
     this._srefChangesSub = this._srefs.changes.subscribe(srefs => this._srefs$.next(srefs));
 
-    const targetStates$: Observable<TargetState[]> = switchMap.call(this._srefs$, (srefs: UISref[]) =>
-      combineLatest<TargetState[]>(srefs.map(sref => sref.targetState$)),
+    const targetStates$: Observable<TargetState[]> = this._srefs$.pipe(
+      switchMap((srefs: UISref[]) => combineLatest<TargetState>(srefs.map(sref => sref.targetState$))),
     );
 
     // Calculate the status of each UISref based on the transition event.
     // Reduce the statuses (if multiple) by or-ing each flag.
-    this._subscription = switchMap
-      .call(transEvents$, (evt: TransEvt) => {
-        return map.call(targetStates$, (targets: TargetState[]) => {
-          const statuses: SrefStatus[] = targets.map(target => getSrefStatus(evt, target));
-          return statuses.reduce(mergeSrefStatus);
-        });
-      })
+    this._subscription = transEvents$
+      .pipe(
+        switchMap((evt: TransEvt) => {
+          return targetStates$.pipe(
+            map((targets: TargetState[]) => {
+              const statuses: SrefStatus[] = targets.map(target => getSrefStatus(evt, target));
+              return statuses.reduce(mergeSrefStatus);
+            }),
+          );
+        }),
+      )
       .subscribe(this._setStatus.bind(this));
   }
 

test/ngModule/augment/augment.module.ts

@@ -5,7 +5,7 @@ import { Ng2StateDeclaration } from '../../../src/interface';
 
 @Component({
   selector: 'component1',
-  template: '<h1>Component 1</h1><ui-view></ui-view>',
+  template: '<h1>Component 1</h1>&ngsp;<ui-view></ui-view>',
 })
 export class Component1 {}
 

test/ts/typescript2.3/package.json

@@ -11,7 +11,7 @@
     "@angular/common": "latest",
     "@angular/core": "latest",
     "@uirouter/angular": "latest",
-    "rxjs": "^5.0.0",
+    "rxjs": "^6.0.0",
     "typescript": "2.3"
   },
   "devDependencies": {}

test/ts/typescript2.4/package.json

@@ -11,7 +11,7 @@
     "@angular/common": "latest",
     "@angular/core": "latest",
     "@uirouter/angular": "latest",
-    "rxjs": "^5.0.0",
+    "rxjs": "^6.0.0",
     "typescript": "2.4"
   },
   "devDependencies": {}

test/ts/typescript2.5/package.json

@@ -11,7 +11,7 @@
     "@angular/common": "latest",
     "@angular/core": "latest",
     "@uirouter/angular": "latest",
-    "rxjs": "^5.0.0",
+    "rxjs": "^6.0.0",
     "typescript": "2.5"
   },
   "devDependencies": {}

test/ts/typescript2.6/package.json

@@ -11,7 +11,7 @@
     "@angular/common": "latest",
     "@angular/core": "latest",
     "@uirouter/angular": "latest",
-    "rxjs": "^5.0.0",
+    "rxjs": "^6.0.0",
     "typescript": "2.6"
   },
   "devDependencies": {}