Upgarde to Angular 6 + RxJS 6 (no rxjs-compat)

package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@types/codemirror": "0.0.45",
-    "@types/lodash": "4.14.73",
+    "@types/lodash": "4.14.110",
     "@types/backbone": "1.3.42",
     "codemirror": "5.28.0",
     "jointjs": "2.1.3",
@@ -51,20 +51,20 @@
     "postinstall-build": "5.0.1"
   },
   "peerDependencies": {
-    "@angular/core": ">=5.2.9 <6.0.0",
-    "@angular/forms": ">=5.2.9 < 6.0.0",
-    "@angular/platform-browser": ">=5.2.9 <6.0.0",
-    "rxjs": ">=5.5.7 <6.0.0"
+    "@angular/core": ">=6.0.0 <7.0.0",
+    "@angular/forms": ">=6.0.0 < 7.0.0",
+    "@angular/platform-browser": ">=6.0.0 <7.0.0",
+    "rxjs": ">=6.0.0 <7.0.0"
   },
   "devDependencies": {
-    "@angular/common": "5.2.9",
-    "@angular/compiler": "5.2.9",
+    "@angular/common": "6.0.7",
+    "@angular/compiler": "6.0.7",
     "@angular/compiler-cli": "4.4.6",
-    "@angular/core": "5.2.9",
-    "@angular/forms": "5.2.9",
-    "@angular/platform-browser": "5.2.9",
-    "@angular/platform-browser-dynamic": "5.2.9",
-    "@angular/platform-server": "5.2.9",
+    "@angular/core": "6.0.7",
+    "@angular/forms": "6.0.7",
+    "@angular/platform-browser": "6.0.7",
+    "@angular/platform-browser-dynamic": "6.0.7",
+    "@angular/platform-server": "6.0.7",
     "@types/jasmine": "2.5.36",
     "@types/node": "6.0.46",
     "camelcase": "4.0.0",
@@ -79,14 +79,14 @@
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "lite-server": "2.2.2",
-    "ngx-bootstrap": "1.8.1",
+    "ngx-bootstrap": "3.0.1",
     "rimraf": "2.6.1",
     "rollup": "0.51.6",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-uglify": "2.0.1",
-    "rxjs": "5.5.6",
+    "rxjs": "^6.2.1",
     "standard-version": "4.0.0",
-    "systemjs": "0.20.19",
+    "systemjs": "0.21.4",
     "tslint": "5.9.1",
     "typescript": "2.5.3",
     "zone.js": "0.8.18",
@@ -98,7 +98,8 @@
     "lodash": "3.10.1",
     "jquery": "3.1.1",
     "ts-disposables": "2.2.3",
-    "jshint": "2.6.3"
+    "jshint": "2.6.3",
+    "systemjs-plugin-babel": "0.0.25"
   },
   "buildDependencies": [
     "@angular/core",

src/demo/systemjs.config.js

@@ -4,6 +4,7 @@
  */
 (function (global) {
   System.config({
+    transpiler: 'plugin-babel',
     paths: {
       // paths serve as alias
       'npm:': 'node_modules/'
@@ -24,8 +25,6 @@
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
 
       // other libraries
-      // 'rxjs/operators': 'npm:rxjs@5.4.3/operators/index.js',
-      'rx': 'npm:rx',
       'rxjs': 'npm:rxjs',
       'jointjs': 'npm:jointjs',
       'jquery': 'npm:jquery',
@@ -35,9 +34,12 @@
       'dagre': 'npm:dagre',
       'codemirror': 'npm:codemirror',
       'moment': 'npm:moment/moment.js',
-      'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
+      'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.es2015.js',
       'ts-disposables': 'npm:ts-disposables',
-      'jshint': 'npm:jshint/dist/jshint.js'
+      'jshint': 'npm:jshint/dist/jshint.js',
+
+      'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+      'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
     },
     meta: {
       'lodash': {
@@ -63,6 +65,7 @@
         main: './dist/rx.js'
       },
       rxjs: {
+        main: 'index.js',
         defaultExtension: 'js'
       },
       'rxjs/operators': {

src/lib/src/directives/resizer.ts

@@ -1,8 +1,8 @@
 import {Directive, Input, Output, EventEmitter, Inject, ElementRef, OnInit, OnDestroy,} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser'
-import {Observable}  from 'rxjs/Observable';
-import { sampleTime } from 'rxjs/operators/sampleTime';
-import 'rxjs/add/observable/fromEvent';
+import { fromEvent } from "rxjs";
+import { sampleTime } from 'rxjs/operators';
+
 import { CompositeDisposable, Disposable } from 'ts-disposables';
 import * as _$ from 'jquery';
 const $ : any = _$;
@@ -123,11 +123,11 @@ export class ResizerDirective implements OnInit, OnDestroy {
     // Need to set left and right elements width and fire events on init when DOM is built

     this.splitSize = this._splitSize;
 
-    let subscription1 = Observable.fromEvent($(this.document).get(0), 'mousemove')
+    let subscription1 = fromEvent($(this.document).get(0), 'mousemove')
       .pipe(sampleTime(300))
       .subscribe(this.mouseMoveHandler);
     this._subscriptions.add(Disposable.create(() => subscription1.unsubscribe()));
-    let subscription2 = Observable.fromEvent($(this.document).get(0), 'mouseup')
+    let subscription2 = fromEvent($(this.document).get(0), 'mouseup')
       .subscribe(e => {
         if (this.dragInProgress) {
           this.mousemove(e);

src/lib/src/editor/editor-utils.ts

@@ -41,14 +41,15 @@ export class Utils {
     // If one of the ends is not a model, the link has no siblings.
     if (!srcId || !trgId) { return; }
 
-    let siblings = _.filter(graph.getLinks(), (sibling : dia.Link) => {
+    const siblings: dia.Link[] = graph.getLinks().filter((sibling: dia.Link) => {
 
-      let _srcId = sibling.get('source').id;
-      let _trgId = sibling.get('target').id;
-      let vertices = sibling.get('vertices');
-      let fanRouted = !vertices || vertices.length === 0 || sibling.get('fanRouted');
+      const _srcId = sibling.get('source').id;
+      const _trgId = sibling.get('target').id;
+      const vertices = sibling.get('vertices');
+      const fanRouted = !vertices || vertices.length === 0 || sibling.get('fanRouted');
 
       return ((_srcId === srcId && _trgId === trgId) || (_srcId === trgId && _trgId === srcId)) && fanRouted;
+
     });
 
     switch (siblings.length) {
@@ -88,7 +89,7 @@ export class Utils {
         // This is the maximum distance between links
         let gap = 20;
 
-        _.each(siblings, (sibling : dia.Link, index : number) => {
+        siblings.forEach((sibling: dia.Link, index: number) => {
 
           // We want the offset values to be calculated as follows 0, 20, 20, 40, 40, 60, 60 ..
           let offset = gap * Math.ceil(index / 2);

src/lib/src/editor/editor.component.ts

@@ -1,15 +1,13 @@
 import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { debounceTime } from 'rxjs/operators/debounceTime';
+import { debounceTime } from 'rxjs/operators';
 import { dia } from 'jointjs';
 import { Flo } from '../shared/flo-common';
 import { Shapes, Constants } from '../shared/shapes';
 import { Utils } from './editor-utils';
 import { CompositeDisposable, Disposable } from 'ts-disposables';
 import * as _$ from 'jquery';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable, Subject, BehaviorSubject } from 'rxjs';
 const joint : any = Flo.joint;
 const $ : any = _$;
 

src/lib/src/palette/palette.component.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, Inject, ViewEncapsulation} from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { debounceTime } from 'rxjs/operators/debounceTime';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { dia } from 'jointjs';
 import { Flo } from '../shared/flo-common';
 import { Shapes, Constants } from './../shared/shapes';

src/lib/src/shared/flo-common.ts

@@ -1,5 +1,5 @@
 import { dia, g } from 'jointjs';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from "rxjs";
 import * as _joint from 'jointjs';
 import * as _$ from 'jquery';
 

src/lib/src/shared/flo-properties.ts

@@ -1,10 +1,8 @@
 import { dia } from 'jointjs';
 import { ValidatorFn, AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms'
 import { Flo } from './flo-common';
-import { Subject } from 'rxjs/Subject'
-import { Observable } from 'rxjs/Observable';
-import { debounceTime } from 'rxjs/operators/debounceTime';
-import { mergeMap } from 'rxjs/operators/mergeMap';
+import { Subject, Observable } from 'rxjs'
+import { debounceTime, mergeMap } from 'rxjs/operators';
 
 export namespace Properties {