[Update] 升级到angular 7

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "WebTerminal"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "static",
-        "theme/default/",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "../node_modules/animate.css/animate.min.css",
-        "../node_modules/xterm/dist/xterm.css",
-        "sass/style.scss",
-        "styles.css",
-        "assets/ztree/awesomeStyle/awesome.css"
-      ],
-      "comment": [
-        "../node_modules/jquery-sparkline/jquery.sparkline.js",
-        "../node_modules/metismenu/dist/metisMenu.js",
-        "assets/slimscroll/jquery.slimscroll.min.js",
-        "../node_modules/tether/dist/js/tether.min.js"
-
-      ],
-      "scripts": [
-        "../node_modules/jquery/dist/jquery.min.js",
-        "../node_modules/xterm/dist/xterm.js",
-        "assets/ztree/jquery.ztree.all.min.js",
-        "assets/ztree/jquery.ztree.exhide.min.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
-}

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "WebTerminal": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/static",
+              "src/theme/default",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "node_modules/animate.css/animate.min.css",
+              "node_modules/xterm/dist/xterm.css",
+              "src/sass/style.scss",
+              "src/styles.css",
+              "src/assets/ztree/awesomeStyle/awesome.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/xterm/dist/xterm.js",
+              "src/assets/ztree/jquery.ztree.all.min.js",
+              "src/assets/ztree/jquery.ztree.exhide.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "WebTerminal:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "WebTerminal:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "WebTerminal:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/xterm/dist/xterm.js",
+              "src/assets/ztree/jquery.ztree.all.min.js",
+              "src/assets/ztree/jquery.ztree.exhide.min.js"
+            ],
+            "styles": [
+              "node_modules/animate.css/animate.min.css",
+              "node_modules/xterm/dist/xterm.css",
+              "src/sass/style.scss",
+              "src/styles.css",
+              "src/assets/ztree/awesomeStyle/awesome.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/static",
+              "src/theme/default",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "WebTerminal-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "WebTerminal:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "WebTerminal",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -5,15 +5,14 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
-    "build": "ng build --environment prod --aot --prod --base-href=/luna/  --deploy '/luna/'",
+    "build": "ng build --prod --base-href=/luna/ --output-path 'luna'",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
-  "other": {
+  "abandon": {
     "@swimlane/ngx-datatable": "^11.3.2",
-    "ajv": "^6.5.0",
     "body-parser": "^1.18.2",
     "clipboard": "^1.7.1",
     "compass-mixins": "^0.12.10",
@@ -35,67 +34,65 @@
     "sass-math": "^1.0.0",
     "tether": "^1.4.4",
     "npm-font-open-sans": "^1.1.0",
+    "@swimlane/ngx-ui": "^25.11.0",
     "utf-8-validate": "^5.0.2"
   },
   "dependencies": {
-    "@angular/animations": "^5.2.11",
-    "@angular/cdk": "^5.2.4",
-    "@angular/common": "^5.2.11",
-    "@angular/compiler": "^5.2.11",
-    "@angular/core": "^5.2.11",
-    "@angular/flex-layout": "^5.0.0-beta.15",
-    "@angular/forms": "^5.2.11",
-    "@angular/http": "^5.2.11",
-    "@angular/material": "^5.2.0",
-    "@angular/platform-browser": "^5.2.11",
-    "@angular/platform-browser-dynamic": "^5.2.11",
-    "@angular/router": "^5.2.11",
-    "@swimlane/ngx-ui": "^20.2.1",
+    "@angular/animations": "~7.2.0",
+    "@angular/cdk": "^7.3.7",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/flex-layout": "^7.0.0-beta.19",
+    "@angular/forms": "~7.2.0",
+    "@angular/http": "^7.2.15",
+    "@angular/material": "^7.3.7",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
     "@types/jquery": "^3.3.6",
     "@types/neffos.js": "^0.1.1",
-    "@types/socket.io-client": "^1.4.32",
-    "rxjs": "5.5.6",
-    "zone.js": "0.8.20",
-    "uuid-js": "^0.7.5",
-    "xterm": "3.3.0",
-    "socket.io": "^1.4.32",
-    "socket.io-client": "^1.4.32",
-    "core-js": "2.5.3",
-    "neffos.js": "^0.1.19",
+    "ajv": "^6.5.0",
+    "animate.css": "^3.6.1",
     "bootstrap": "^4.3.1",
-    "popper.js": "^1.14.7",
-    "jquery": "^3.4.1",
+    "codemirror": "^5.42.0",
+    "core-js": "^2.5.4",
+    "font-awesome": "4.7.0",
     "guacamole-common-js": "0.9.14-b",
-    "ngx-cookie-service": "^1.0.10",
+    "jquery": "^3.4.1",
     "metismenu": "^2.7.9",
-    "ngx-logger": "^2.2.4",
-    "animate.css": "^3.6.1",
-    "tslib": "^1.9.0",
-    "requirejs": "^2.3.5",
+    "neffos.js": "^0.1.19",
+    "ngx-cookie-service": "^1.0.10",
+    "ngx-logger": "4.0.4",
     "ngx-progressbar": "^2.1.1",
-    "font-awesome": "4.7.0"
+    "popper.js": "^1.14.7",
+    "requirejs": "^2.3.5",
+    "rxjs": "~6.3.3",
+    "rxjs-compat": "^6.0.0-rc.0",
+    "tslib": "^1.9.0",
+    "uuid-js": "^0.7.5",
+    "xterm": "3.3.0",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^0.3.2",
-    "@angular-devkit/schematics": "^0.3.2",
-    "@angular/cli": "^1.7.4",
-    "@angular/compiler-cli": "^5.2.11",
-    "@angular/language-service": "5.2.0",
-    "@types/jasmine": "2.8.4",
-    "@types/jasminewd2": "~2.0.2",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.3",
-    "karma-jasmine": "1.1.1",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "node-sass": "^4.11.0",
-    "protractor": "^5.4.2",
-    "ts-node": "3.3.0",
-    "tslint": "5.9.1",
-    "typescript": "2.6.2"
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "~7.3.9",
+    "@angular/compiler-cli": "~7.2.0",
+    "@angular/language-service": "~7.2.0",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.2.2"
   }
 }

src/app/app.service.ts

 import {EventEmitter, Injectable, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
+
+
 import {DataStore, User, Browser, i18n} from './globals';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';

src/app/elements/asset-tree/asset-tree.component.ts

 import {Component, Input, OnInit, OnDestroy, ElementRef, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {BehaviorSubject} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
 import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/app.service';

src/app/elements/content/content.component.scss

@@ -41,6 +41,10 @@
   padding: 0 5px;
 }
 
+.scroll-button .right {
+  padding-left: 5px;
+}
+
 .scroll-button a.disabled {
   color: #676A6D;
   cursor: not-allowed;

src/app/elements/left-bar/left-bar.component.html

 <div class="sidebar" fxLayout="column" >
-  <div fxflex="1 1 30px" class="tree-filter">
+  <div fxflex="30px" class="tree-filter">
     <elements-tree-filter ></elements-tree-filter>
   </div>
-  <div class="overflow ngx-scroll-overlay" fxflex="1 1 calc(100% - 60px)">
+  <div fxflex="calc(100% - 60px)" class="overflow ngx-scroll-overlay">
     <elements-asset-tree ></elements-asset-tree>
   </div>
 
-  <div class="footer-version" fxflex="1 1 30px">
+  <div fxflex="30px" class="footer-version">
     <p> Version <strong>{{version}}</strong></p>
   </div>
 </div>

src/app/elements/term/term.component.ts

@@ -3,11 +3,10 @@ import {ElementRef} from '@angular/core';
 import {Terminal} from 'xterm';
 import {fit} from 'xterm/lib/addons/fit/fit';
 import {LogService} from '@app/app.service';
-import {Observable} from 'rxjs/Rx';
+import {Observable, fromEvent} from 'rxjs';
+import {debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as $ from 'jquery/dist/jquery.min.js';
 import 'rxjs/Observable';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
 
 
 @Component({
@@ -27,9 +26,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    this.winSizeChange$ = Observable.fromEvent(window, 'resize')
-      .debounceTime(500)
-      .distinctUntilChanged();
+    this.winSizeChange$ = fromEvent(window, 'resize').pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+    );
 
     this.winSizeChange$
       .subscribe(() => {
@@ -45,7 +45,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   getWinSize() {
     let availableHeight = 0;
     let availableWidth = 0;
-    if (document.fullscreenElement) {
+    if (document['fullscreenElement']) {
       availableWidth = document.body.clientWidth - 10;
       availableHeight = document.body.clientHeight;
     } else {

src/app/globals.ts

 'use strict';
 import {EventEmitter} from 'events/events';
-import * as io from 'socket.io-client';
 import {Socket} from './utils/socket';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {BehaviorSubject} from 'rxjs';
 import {ConnectEvt, User as _User } from './model';
 import {DataStore as _DataStore, Browser as _Browser, Video as _Video, Monitor as _Monitor} from './model';
 
@@ -43,7 +42,6 @@ export async function getWsSocket() {
   const nsConn = await TermWS.connect();
   if (!nsConn) {
     console.log('Try to using socket.io protocol');
-    TermWS = io.connect('/ssh', {reconnectionAttempts: 10});
   }
   DataStore.socket = TermWS;
   return TermWS;

src/app/pages/main/main.component.css

+#container {
+  height: calc(100% - 30px);
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background-color: #1f1b1b;
+}
+
 .content {
   height: 100%;
-  width: 100%;
   padding: 0;
   background-color: #1f1b1b;
   /*background-color: red;*/
   margin: 0;
   position: initial;
+  min-width: 100px;
 }
 
+
 /*.content {*/
   /*overflow: hidden !important;*/
 /*}*/
 
-elements-nav {
-  height: 30px;
+.left-side {
+  min-width: 100px;
 }
 
-#container {
+.handle {
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 9999;
+  height: 5px;
+  width: 1px;
+  display: block;
   padding: 0;
   margin: 0;
-  height: calc(100% - 30px);
+  position: relative;
+  line-height: 0;
+}
+
+.handle-row {
+  top: 50%;
+  left: -8px;
+  transform: translateX(-50%) rotate(270deg);
+  cursor: col-resize;;
+}
+
+elements-nav {
+  height: 30px;
 }
 
 /*.container-fluid {*/
   /*padding-top: 30px;*/
 /*}*/
+

src/app/pages/main/main.component.html

 <elements-nav></elements-nav>
-<div fxLayout="row wrap" id="container" class="container-fluid row" ngxSplit="row">
-  <div fxFlex="1 1 20%" minBasis="100px" maxBasis="800px" fxFlexFill ngxSplitArea *ngIf="DataStore.showLeftBar">
+<div fxLayout="row" id="container" ngxSplit="row">
+  <div fxFlex="20%" fxFlexFill maxBasis="400px" minBasis="100px" ngxSplitArea *ngIf="DataStore.showLeftBar" class="left-side">
     <elements-left-bar></elements-left-bar>
   </div>
-  <div fxFlex="0" ngxSplitHandle (mouseup)="dragSplitBtn($event)"></div>
-  <div [fxFlex]="DataStore.showLeftBar ? '1 1 80%' : '1 1 100%'" ngxSplitArea class="content">
+  <div ngxSplitHandle (mouseup)="dragSplitBtn($event)" class="handle handle-row" *ngIf="DataStore.showLeftBar" >
+    <i class="fa fa-window-minimize" style="color: white"></i>
+  </div>
+  <div [fxFlex]="DataStore.showLeftBar ? '80%' : '100%'" fxFlexFill ngxSplitArea class="content">
     <elements-content></elements-content>
   </div>
 </div>

src/app/plugins/MaterialModule.component.ts

@@ -3,7 +3,7 @@ import {
   // MatAutocompleteModule,
   MatButtonModule,
   // MatButtonToggleModule,
-  // MatCardModule,
+  MatCardModule,
   // MatCheckboxModule,
   MatChipsModule,
   // MatDatepickerModule,
@@ -40,7 +40,7 @@ import {CdkTableModule} from '@angular/cdk/table';
     // MatAutocompleteModule,
     MatButtonModule,
     // MatButtonToggleModule,
-    // MatCardModule,
+    MatCardModule,
     // MatCheckboxModule,
     MatChipsModule,
     // MatStepperModule,

src/app/plugins/plugins.ts

 import {MaterialModule} from './MaterialModule.component';
-import {NgxUIModule, SplitModule} from '@swimlane/ngx-ui';
+// import {SplitModule, NgxUIModule} from '@swimlane/ngx-ui';
+import {SplitModule} from '@app/plugins/split/split.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgProgressModule} from 'ngx-progressbar';
-// import {FlexLayoutModule} from '@angular/flex-layout';
 
 
 export const PluginModules = [
   BrowserAnimationsModule,
   NgProgressModule,
   MaterialModule,
-  // FlexLayoutModule,
   LoggerModule.forRoot({level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
-  NgxUIModule, SplitModule
+  FlexLayoutModule,
+  SplitModule,
+  // NgxUIModule,
 ];
 
 

src/app/plugins/split/split-area.directive.ts

+import {Directive, Optional, Self} from '@angular/core';
+import {DefaultFlexDirective} from '@angular/flex-layout';
+
+@Directive({
+  selector: '[ngxSplitArea]',
+  host: {
+    style: 'overflow: auto;'
+  }
+})
+export class SplitAreaDirective {
+  constructor(@Optional() @Self() public flex: DefaultFlexDirective) {}
+}

src/app/plugins/split/split-handle.directive.ts

+import {Directive, ElementRef, Inject, Output} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {fromEvent, Observable} from 'rxjs';
+import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators';
+
+@Directive({
+  selector: '[ngxSplitHandle]',
+  host: {
+    class: 'ngx-split-handle',
+    title: 'Drag to resize'
+  }
+})
+export class SplitHandleDirective {
+  @Output() drag: Observable<{ x: number, y: number }>;
+
+  constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
+    let last = {x: 0, y: 0};
+    const scanPositionDelta = (event: MouseEvent) => {
+      const current = {x: event.screenX, y: event.screenY};
+      const delta = {x: current.x - last.x, y: current.y - last.y};
+      last = current;
+      return delta;
+    };
+
+    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(scanPositionDelta));
+    const mousemove$ = fromEvent(window, 'mousemove').pipe(
+      throttleTime(50),
+      map(scanPositionDelta)
+    );
+    const mouseup$ = fromEvent(window, 'mouseup');
+
+    this.drag = mousedown$.pipe(switchMap(() => mousemove$.pipe(takeUntil(mouseup$))));
+  }
+}

src/app/plugins/split/split.directive.ts

+import {
+  AfterContentInit,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  Input,
+  OnDestroy,
+  QueryList,
+} from '@angular/core';
+import {FlexDirective} from '@angular/flex-layout';
+import {Subscription} from 'rxjs';
+
+import {SplitHandleDirective} from './split-handle.directive';
+import {SplitAreaDirective} from './split-area.directive';
+
+
+@Directive({
+  selector: '[ngxSplit]',
+  host: {
+    class: 'ngx-split'
+  }
+})
+export class SplitDirective implements AfterContentInit, OnDestroy {
+  @Input('ngxSplit') direction = 'row';
+  @ContentChild(SplitHandleDirective) handle: SplitHandleDirective;
+  @ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
+
+  private watcher: Subscription;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterContentInit(): void {
+    this.watcher = this.handle.drag.subscribe(this.onDrag.bind(this));
+  }
+
+  ngOnDestroy() {
+    this.watcher.unsubscribe();
+  }
+
+  /**
+   * While dragging, continually update the `flex.activatedValue` for each area
+   * managed by the splitter.
+   */
+  onDrag({x, y}: {x: number, y: number}): void {
+    const dragAmount = (this.direction === 'row') ? x : y;
+
+    this.areas.forEach((area, i) => {
+      // get the cur flex and the % in px
+      const flex = (area.flex as FlexDirective);
+      const delta = (i === 0) ? dragAmount : -dragAmount;
+      const currentValue = flex.activatedValue;
+
+      // Update Flex-Layout value to build/inject new flexbox CSS
+      flex.activatedValue = `${this.calculateSize(currentValue, delta)}`;
+    });
+  }
+
+  /**
+   * Use the pixel delta change to recalculate the area size (%)
+   * Note: flex value may be '', %, px, or '<grow> <shrink> <basis>'
+   */
+  calculateSize(value: string, delta: number): number {
+    const containerSizePx = this.elementRef.nativeElement.clientWidth;
+    const elementSizePx = Math.round(valueToPixel(value, containerSizePx));
+
+    const elementSize = ((elementSizePx + delta) / containerSizePx) * 100;
+    return Math.round(elementSize * 100) / 100;
+  }
+}
+
+/** Convert the pixel or percentage value to a raw pixel float value */
+function valueToPixel(value: string, parentWidth: number): number {
+  const size = parseFloat(value);
+  return !value.includes('px') ? parentWidth * (size / 100) : size;
+}

src/app/plugins/split/split.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {SplitDirective} from './split.directive';
+import {SplitAreaDirective} from './split-area.directive';
+import {SplitHandleDirective} from './split-handle.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+  ],
+  declarations: [SplitDirective, SplitAreaDirective, SplitHandleDirective],
+  exports: [SplitDirective, SplitAreaDirective, SplitHandleDirective]
+})
+export class SplitModule {}

src/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

tsconfig.json

@@ -3,8 +3,12 @@
   "compilerOptions": {
     "baseUrl": "src",
     "paths": {
-      "@src/*": ["*"],
-      "@app/*": ["app/*"]
+      "@src/*": [
+        "*"
+      ],
+      "@app/*": [
+        "app/*"
+      ]
     },
     "allowJs": true,
     "outDir": "./dist/out-tsc",
@@ -21,6 +25,8 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "module": "es2015",
+    "allowSyntheticDefaultImports": true
   }
 }

tslint.json

@@ -14,8 +14,7 @@
     "eofline": true,
     "forin": true,
     "import-blacklist": [
-      true,
-      "rxjs"
+      true
     ],
     "import-spacing": true,
     "indent": [