bumped angular & webpack

7bfc13da · Eugene Pankov · 7cb6642f · 7bfc13da · 7bfc13da · 7bfc13da
31 changed file
--- a/app/package.json
+++ b/app/package.json
@@ -12,14 +12,14 @@
    "watch": "webpack --progress --color --watch"
  },
  "dependencies": {
-    "@angular/animations": "4.3.0",
-    "@angular/common": "4.3.0",
-    "@angular/compiler": "4.3.0",
-    "@angular/core": "4.3.0",
-    "@angular/forms": "4.3.0",
-    "@angular/platform-browser": "4.3.0",
-    "@angular/platform-browser-dynamic": "4.3.0",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
+    "@angular/animations": "6.0.2",
+    "@angular/common": "6.0.2",
+    "@angular/compiler": "6.0.2",
+    "@angular/core": "6.0.2",
+    "@angular/forms": "6.0.2",
+    "@angular/platform-browser": "6.0.2",
+    "@angular/platform-browser-dynamic": "6.0.2",
+    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "devtron": "1.4.0",
    "electron-config": "0.2.1",
    "electron-debug": "^1.0.1",
@@ -27,10 +27,10 @@
    "electron-squirrel-startup": "^1.0.0",
    "js-yaml": "3.8.2",
    "mz": "^2.6.0",
-    "ngx-toastr": "^8.0.0",
+    "ngx-toastr": "^8.7.3",
    "path": "0.12.7",
-    "rxjs": "5.3.0",
-    "zone.js": "0.8.12"
+    "rxjs": "^6.1.0",
+    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@types/mz": "0.0.31"

--- a/app/src/preload.scss
+++ b/app/src/preload.scss
@@ -62,3 +62,7 @@
 .modal-dialog {
  -webkit-app-region: no-drag;
 }
+
+[ngbradiogroup] input[type="radio"] {
+    display: none;
+}
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@@ -21,28 +21,34 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+          }
        }
      },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      {
        test: /\.(png|svg)$/,
-        loader: "file-loader",
-        options: {
-          name: 'images/[name].[ext]'
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'images/[name].[ext]'
+          }
        }
      },
      {
        test: /\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: "file-loader",
-        options: {
-          name: 'fonts/[name].[ext]'
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'fonts/[name].[ext]'
+          }
        }
      }
    ]

--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2,51 +2,51 @@
 # yarn lockfile v1


-"@angular/animations@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.0.tgz#56f34b84649379202ac359929b82eb0b915e9c72"
+"@angular/animations@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-6.0.2.tgz#92063f612c3b33d962eddc9ad538cadd231fbe47"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/common@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.0.tgz#13a54a6929dd52f9729b16ae446fad58fe163053"
+"@angular/common@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-6.0.2.tgz#e4cbb7d45d8d2f35e918d62f0cbfd8c87e9168f7"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/compiler@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.0.tgz#55503bf27a1f062f71b9495393f3311903a8fc43"
+"@angular/compiler@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.0.2.tgz#b9d29b7e032c767179967540f1ed7f8777a615a1"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/core@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.0.tgz#bd2249c3de1224a7c6536c4aba728d6565329334"
+"@angular/core@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-6.0.2.tgz#d183730d73182a4590a5d71083db45655f210e69"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/forms@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.0.tgz#7d0c7a854737e9a30a5fd9665f8d4f56a1b91bd8"
+"@angular/forms@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.2.tgz#a0647930e8b6e7fbd48f55eb69b399a41bcd091a"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/platform-browser-dynamic@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.0.tgz#551fb18851b27ee8f3e4b0ee25aad10bd7b312e3"
+"@angular/platform-browser-dynamic@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.2.tgz#755689df9f02bbcb270c7872a75a2ffe7e0b0c33"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@angular/platform-browser@4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.0.tgz#02389489185185c3becf06359346100e5479c7e1"
+"@angular/platform-browser@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-6.0.2.tgz#19f56f6efbd0e7af5f35fe2f8cde3557dc8ba689"
  dependencies:
-    tslib "^1.7.1"
+    tslib "^1.9.0"

-"@ng-bootstrap/ng-bootstrap@^1.0.0-beta.2":
-  version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.2.tgz#3d4b567b0334a9ee631b73c72156cd3a9d3cd29f"
+"@ng-bootstrap/ng-bootstrap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.0.0.tgz#65f78c7dd5a8ac424f44bb2050a9eab247cdeb0c"

 "@types/mz@0.0.31":
  version "0.0.31"
@@ -195,9 +195,11 @@ mz@^2.6.0:
    object-assign "^4.0.1"
    thenify-all "^1.0.0"

-ngx-toastr@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.0.0.tgz#f3bc53146b2f7da3eabf3daa1b1bbdf65cb49697"
+ngx-toastr@^8.7.3:
+  version "8.7.3"
+  resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-8.7.3.tgz#d3b7a8077ba1c860dd8a44779ccad38c5ea15c92"
+  dependencies:
+    tslib "^1.9.0"

 object-assign@^4.0.1:
  version "4.1.1"
@@ -236,20 +238,16 @@ process@^0.11.1:
  version "0.11.10"
  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"

-rxjs@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.3.0.tgz#d88ccbdd46af290cbdb97d5d8055e52453fabe2d"
+rxjs@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.1.0.tgz#833447de4e4f6427b9cec3e5eb9f56415cd28315"
  dependencies:
-    symbol-observable "^1.0.1"
+    tslib "^1.9.0"

 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"

-symbol-observable@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
-
 thenify-all@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@@ -262,9 +260,9 @@ thenify-all@^1.0.0:
  dependencies:
    any-promise "^1.0.0"

-tslib@^1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+tslib@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.1.tgz#a5d1f0532a49221c87755cfcc89ca37197242ba7"

 util@^0.10.3:
  version "0.10.3"
@@ -272,6 +270,6 @@ util@^0.10.3:
  dependencies:
    inherits "2.0.1"

-zone.js@0.8.12:
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
+zone.js@~0.8.26:
+  version "0.8.26"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.26.tgz#7bdd72f7668c5a7ad6b118148b4ea39c59d08d2d"
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
    "@types/node": "7.0.5",
    "@types/webpack-env": "1.13.0",
    "apply-loader": "0.1.0",
-    "awesome-typescript-loader": "3.1.2",
+    "awesome-typescript-loader": "^5.0.0",
    "core-js": "2.4.1",
    "cross-env": "4.0.0",
    "css-loader": "0.28.0",
@@ -13,7 +13,7 @@
    "electron-builder": "17.1.1",
    "electron-builder-squirrel-windows": "17.0.1",
    "electron-rebuild": "1.5.11",
-    "file-loader": "0.9.0",
+    "file-loader": "^1.1.11",
    "font-awesome": "4.7.0",
    "graceful-fs": "^4.1.11",
    "html-loader": "0.4.4",
@@ -25,13 +25,13 @@
    "node-sass": "^4.5.3",
    "npmlog": "4.1.0",
    "npx": "^9.7.1",
-    "pug": "2.0.0-beta11",
+    "pug": "^2.0.3",
    "pug-html-loader": "1.0.9",
-    "pug-loader": "2.3.0",
+    "pug-loader": "^2.4.0",
    "pug-static-loader": "0.0.1",
    "raven-js": "3.16.0",
    "raw-loader": "0.5.1",
-    "sass-loader": "6.0.3",
+    "sass-loader": "^7.0.1",
    "shelljs": "0.7.7",
    "source-sans-pro": "2.0.10",
    "style-loader": "0.13.1",
@@ -39,10 +39,11 @@
    "tslint": "5.1.0",
    "tslint-config-standard": "5.0.2",
    "tslint-eslint-rules": "4.0.0",
-    "typescript": "2.2.2",
+    "typescript": "^2.8.3",
    "url-loader": "0.5.7",
    "val-loader": "0.5.0",
-    "webpack": "^3.0.0",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
    "yaml-loader": "0.4.0",
    "yarn": "^1.3.2"
  },

--- a/terminus-community-color-schemes/webpack.config.js
+++ b/terminus-community-color-schemes/webpack.config.js
@@ -18,20 +18,22 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },
-      { test: /[\\\/]schemes[\\\/]/, loader: "raw-loader" },
+      { test: /[\\\/]schemes[\\\/]/, use: "raw-loader" },
    ]
  },
  externals: [

--- a/terminus-core/package.json
+++ b/terminus-core/package.json
@@ -25,8 +25,7 @@
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "electron-updater": "^2.8.9",
-    "ngx-perfect-scrollbar": "4.0.0",
-    "typescript": "^2.4.1"
+    "ngx-perfect-scrollbar": "^6.0.0"
  },
  "peerDependencies": {
    "@angular/animations": "4.0.1",

--- a/terminus-core/src/components/tabBody.component.ts
+++ b/terminus-core/src/components/tabBody.component.ts
@@ -7,7 +7,7 @@ import { BaseTabComponent } from '../components/baseTab.component'
        <perfect-scrollbar [config]="{ suppressScrollX: true }" *ngIf="scrollable">
            <ng-template #scrollablePlaceholder></ng-template>
        </perfect-scrollbar>
-        <template #nonScrollablePlaceholder [ngIf]="!scrollable"></template>
+        <ng-template #nonScrollablePlaceholder *ngIf="!scrollable"></ng-template>
    `,
    styles: [
        require('./tabBody.component.scss'),

--- a/terminus-core/src/index.ts
+++ b/terminus-core/src/index.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'
+import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'

 import { AppService } from './services/app.service'
 import { ConfigService } from './services/config.service'
@@ -34,7 +34,7 @@ import { Theme } from './api/theme'
 import { StandardTheme, StandardCompactTheme } from './theme'
 import { CoreConfigProvider } from './config'

-import 'perfect-scrollbar/dist/css/perfect-scrollbar.css'
+import 'perfect-scrollbar/css/perfect-scrollbar.css'

 const PROVIDERS = [
    AppService,
@@ -52,6 +52,7 @@ const PROVIDERS = [
    { provide: Theme, useClass: StandardTheme, multi: true },
    { provide: Theme, useClass: StandardCompactTheme, multi: true },
    { provide: ConfigProvider, useClass: CoreConfigProvider, multi: true },
+    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: { suppressScrollX: true }}
 ]

 @NgModule({
@@ -60,9 +61,7 @@ const PROVIDERS = [
        BrowserAnimationsModule,
        FormsModule,
        NgbModule.forRoot(),
-        PerfectScrollbarModule.forRoot({
-            suppressScrollX: true,
-        }),
+        PerfectScrollbarModule,
    ],
    declarations: [
        AppRootComponent,
@@ -92,5 +91,11 @@ export default class AppModule {
    }
 }

+// PerfectScrollbar fix
+import { fromEvent } from 'rxjs/internal/observable/fromEvent'
+import { merge } from 'rxjs/internal/observable/merge'
+require('rxjs').fromEvent = fromEvent
+require('rxjs').merge = merge
+
 export { AppRootComponent as bootstrap }
 export * from './api'
--- a/terminus-core/src/services/config.service.ts
+++ b/terminus-core/src/services/config.service.ts
@@ -6,7 +6,6 @@ import { Injectable, Inject } from '@angular/core'
 import { ConfigProvider } from '../api/configProvider'
 import { ElectronService } from './electron.service'
 import { HostAppService } from './hostApp.service'
-import * as Reflect from 'core-js/es7/reflect'

 const configMerge = (a, b) => require('deepmerge')(a, b, { arrayMerge: (_d, s) => s })

@@ -104,12 +103,11 @@ export class ConfigService {
    enabledServices<T> (services: T[]): T[] {
        if (!this.servicesCache) {
            this.servicesCache = {}
-            let ngModule = Reflect.getMetadata('annotations', window['rootModule'])[0]
+            let ngModule = window['rootModule'].ngInjectorDef
            for (let imp of ngModule.imports) {
-                let module = imp['module'] || imp
-                let annotations = Reflect.getMetadata('annotations', module)
-                if (annotations) {
-                    this.servicesCache[module['pluginName']] = annotations[0].providers.map(provider => {
+                let module = (imp['ngModule'] || imp)
+                if (module.ngInjectorDef && module.ngInjectorDef.providers) {
+                    this.servicesCache[module['pluginName']] = module.ngInjectorDef.providers.map(provider => {
                        return provider['useClass'] || provider
                    })
                }

--- a/terminus-core/webpack.config.js
+++ b/terminus-core/webpack.config.js
@@ -6,6 +6,7 @@ module.exports = {
  entry: 'src/index.ts',
  devtool: 'source-map',
  context: __dirname,
+  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
@@ -18,16 +19,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },

--- a/terminus-core/yarn.lock
+++ b/terminus-core/yarn.lock
@@ -185,15 +185,20 @@ ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"

-ngx-perfect-scrollbar@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.0.0.tgz#f1e19449fa97d7f16e1ceb1fe1739e4bb646bebe"
+ngx-perfect-scrollbar@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.0.0.tgz#92b51957c04ed6a6d416beca2707bab005667b68"
  dependencies:
-    perfect-scrollbar "~0.6.0"
+    perfect-scrollbar "^1.3.0"
+    resize-observer-polyfill "^1.4.0"
+
+perfect-scrollbar@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"

-perfect-scrollbar@~0.6.0:
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.6.16.tgz#b1d61a5245cf3962bb9a8407a3fc669d923212fc"
+resize-observer-polyfill@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"

 sax@^1.2.1:
  version "1.2.4"

--- a/terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts
+++ b/terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts
 import { BehaviorSubject, Observable } from 'rxjs'
+import { debounceTime, distinctUntilChanged, first, tap, flatMap } from 'rxjs/operators'
 import * as semver from 'semver'

 import { Component, Input } from '@angular/core'
@@ -33,15 +34,18 @@ export class PluginsSettingsTabComponent {

    ngOnInit () {
        this.availablePlugins$ = this.availablePluginsQuery$
-            .debounceTime(200)
-            .distinctUntilChanged()
-            .flatMap(query => {
-                this.availablePluginsReady = false
-                return this.pluginManager.listAvailable(query).do(() => {
-                    this.availablePluginsReady = true
+            .asObservable()
+            .pipe(
+                debounceTime(200),
+                distinctUntilChanged(),
+                flatMap(query => {
+                    this.availablePluginsReady = false
+                    return this.pluginManager.listAvailable(query).pipe(tap(() => {
+                        this.availablePluginsReady = true
+                    }))
                })
-            })
-        this.availablePlugins$.first().subscribe(available => {
+            )
+        this.availablePlugins$.pipe(first()).subscribe(available => {
            for (let plugin of this.pluginManager.installedPlugins) {
                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version))
            }

--- a/terminus-plugin-manager/src/services/pluginManager.service.ts
+++ b/terminus-plugin-manager/src/services/pluginManager.service.ts
@@ -2,7 +2,8 @@ import * as path from 'path'
 import * as fs from 'mz/fs'
 import { exec } from 'mz/child_process'
 import axios from 'axios'
-import { Observable } from 'rxjs'
+import { Observable, from } from 'rxjs'
+import { map } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Logger, LogService, ConfigService, HostAppService, Platform } from 'terminus-core'

@@ -70,15 +71,14 @@ export class PluginManagerService {
    }

    listAvailable (query?: string): Observable<IPluginInfo[]> {
-        return Observable
-            .fromPromise(
-                axios.get(`https://www.npmjs.com/search?q=keywords%3A${KEYWORD}+${encodeURIComponent(query || '')}&from=0&size=1000`, {
-                    headers: {
-                        'x-spiferack': '1',
-                    }
-                })
-            )
-            .map(response => response.data.objects.map(item => ({
+        return from(
+            axios.get(`https://www.npmjs.com/search?q=keywords%3A${KEYWORD}+${encodeURIComponent(query || '')}&from=0&size=1000`, {
+                headers: {
+                    'x-spiferack': '1',
+                }
+            })
+        ).pipe(
+            map(response => response.data.objects.map(item => ({
                name: item.package.name.substring(NAME_PREFIX.length),
                packageName: item.package.name,
                description: item.package.description,
@@ -86,8 +86,9 @@ export class PluginManagerService {
                homepage: item.package.links.homepage,
                author: (item.package.author || {}).name,
                isOfficial: item.package.publisher.username === OFFICIAL_NPM_ACCOUNT,
-            })))
-            .map(plugins => plugins.filter(x => x.packageName.startsWith(NAME_PREFIX)))
+            }))),
+            map(plugins => plugins.filter(x => x.packageName.startsWith(NAME_PREFIX))),
+        )
    }

    async installPlugin (plugin: IPluginInfo) {

--- a/terminus-plugin-manager/webpack.config.js
+++ b/terminus-plugin-manager/webpack.config.js
@@ -18,16 +18,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        query: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          query: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },

--- a/terminus-settings/src/components/hotkeyInputModal.component.ts
+++ b/terminus-settings/src/components/hotkeyInputModal.component.ts
-import { Component, Input, trigger, transition, style, animate } from '@angular/core'
+import { Component, Input } from '@angular/core'
+import { trigger, transition, style, animate } from '@angular/animations'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subscription } from 'rxjs'
 import { HotkeysService } from 'terminus-core'

--- a/terminus-settings/src/components/settingsTab.component.ts
+++ b/terminus-settings/src/components/settingsTab.component.ts
@@ -14,8 +14,8 @@ import { SettingsTabProvider } from '../api'
 export class SettingsTabComponent extends BaseTabComponent {
    @Input() activeTab: string
    hotkeyFilter = ''
-    private hotkeyDescriptions: IHotkeyDescription[]
-    private screens
+    hotkeyDescriptions: IHotkeyDescription[]
+    screens: any[]

    constructor (
        public config: ConfigService,

--- a/terminus-settings/src/components/settingsTabBody.component.ts
+++ b/terminus-settings/src/components/settingsTabBody.component.ts
@@ -8,7 +8,7 @@ import { SettingsTabProvider } from '../api'
 export class SettingsTabBodyComponent {
    @Input() provider: SettingsTabProvider
    @ViewChild('placeholder', {read: ViewContainerRef}) placeholder: ViewContainerRef
-    private component: ComponentRef<Component>
+    component: ComponentRef<Component>

    constructor (private componentFactoryResolver: ComponentFactoryResolver) { }


--- a/terminus-settings/webpack.config.js
+++ b/terminus-settings/webpack.config.js
@@ -18,16 +18,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },

--- a/terminus-ssh/package.json
+++ b/terminus-ssh/package.json
@@ -19,12 +19,8 @@
  "devDependencies": {
    "@types/ssh2": "^0.5.35",
    "@types/webpack-env": "^1.13.0",
-    "apply-loader": "^2.0.0",
-    "awesome-typescript-loader": "^3.1.2",
    "electron": "^1.6.11",
    "ngx-toastr": "^8.0.0",
-    "pug": "^2.0.0-rc.3",
-    "pug-loader": "^2.3.0",
    "rxjs": "^5.4.0",
    "typescript": "^2.2.2",
    "webpack": "^2.3.3"

--- a/terminus-ssh/webpack.config.js
+++ b/terminus-ssh/webpack.config.js
@@ -17,16 +17,18 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        query: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
          }
        }
      },

--- a/terminus-ssh/yarn.lock
+++ b/terminus-ssh/yarn.lock
--- a/terminus-terminal/src/buttonProvider.ts
+++ b/terminus-terminal/src/buttonProvider.ts
 import * as fs from 'mz/fs'
 import * as path from 'path'
+import { first } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { HotkeysService, ToolbarButtonProvider, IToolbarButton, ConfigService, HostAppService, ElectronService, Logger, LogService } from 'terminus-core'
+import { HotkeysService, ToolbarButtonProvider, IToolbarButton, ConfigService, HostAppService, ElectronService } from 'terminus-core'

 import { TerminalService } from './services/terminal.service'

 @Injectable()
 export class ButtonProvider extends ToolbarButtonProvider {
-    private logger: Logger
-
    constructor (
        private terminal: TerminalService,
        private config: ConfigService,
-        log: LogService,
        hostApp: HostAppService,
        electron: ElectronService,
        hotkeys: HotkeysService,
    ) {
        super()
-        this.logger = log.create('newTerminalButton')
        hotkeys.matchedHotkey.subscribe(async (hotkey) => {
            if (hotkey === 'new-tab') {
                this.openNewTab()
@@ -47,7 +44,7 @@ export class ButtonProvider extends ToolbarButtonProvider {
    }

    async openNewTab (cwd?: string): Promise<void> {
-        let shells = await this.terminal.shells$.first().toPromise()
+        let shells = await this.terminal.shells$.pipe(first()).toPromise()
        let shell = shells.find(x => x.id === this.config.store.terminal.shell)
        this.terminal.openTab(shell, cwd)
    }

--- a/terminus-terminal/src/components/terminalSettingsTab.component.ts
+++ b/terminus-terminal/src/components/terminalSettingsTab.component.ts
 import { Observable } from 'rxjs'
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'
 import { exec } from 'mz/child_process'
 const equal = require('deep-equal')
 const fontManager = require('font-manager')
@@ -51,11 +52,12 @@ export class TerminalSettingsTabComponent {
    }

    fontAutocomplete = (text$: Observable<string>) => {
-        return text$
-          .debounceTime(200)
-          .distinctUntilChanged()
-          .map(query => this.fonts.filter(v => new RegExp(query, 'gi').test(v)))
-          .map(list => Array.from(new Set(list)))
+        return text$.pipe(
+          debounceTime(200),
+          distinctUntilChanged(),
+          map(query => this.fonts.filter(v => new RegExp(query, 'gi').test(v))),
+          map(list => Array.from(new Set(list))),
+      )
    }

    editScheme (scheme: ITerminalColorScheme) {

--- a/terminus-terminal/src/components/terminalTab.component.ts
+++ b/terminus-terminal/src/components/terminalTab.component.ts
-import { BehaviorSubject, Subject, Subscription } from 'rxjs'
+import { Observable, BehaviorSubject, Subject, Subscription } from 'rxjs'
+import { first } from 'rxjs/operators'
 import { ToastrService } from 'ngx-toastr'
 import { Component, NgZone, Inject, Optional, ViewChild, HostBinding, Input } from '@angular/core'
 import { AppService, ConfigService, BaseTabComponent, ElectronService, ThemesService, HostAppService, HotkeysService, Platform } from 'terminus-core'
@@ -32,7 +33,8 @@ export class TerminalTabComponent extends BaseTabComponent {
    hotkeysSubscription: Subscription
    bell$ = new Subject()
    size: ResizeEvent
-    resize$ = new Subject<ResizeEvent>()
+    resize$: Observable<ResizeEvent>
+    private resize_ = new Subject<ResizeEvent>()
    input$ = new Subject<string>()
    output$ = new Subject<string>()
    contentUpdated$ = new Subject<void>()
@@ -58,9 +60,10 @@ export class TerminalTabComponent extends BaseTabComponent {
        @Optional() @Inject(TerminalDecorator) private decorators: TerminalDecorator[],
    ) {
        super()
+        this.resize$ = this.resize_.asObservable()
        this.decorators = this.decorators || []
        this.setTitle('Terminal')
-        this.resize$.first().subscribe(async (resizeEvent) => {
+        this.resize$.pipe(first()).subscribe(async resizeEvent => {
            if (!this.session) {
                this.session = this.sessions.addSession(
                    Object.assign({}, this.sessionOptions, resizeEvent)
@@ -330,7 +333,7 @@ export class TerminalTabComponent extends BaseTabComponent {
                if (this.session) {
                    this.session.resize(columns, rows)
                }
-                this.resize$.next(this.size)
+                this.resize_.next(this.size)
            })
        }
    }
@@ -452,7 +455,7 @@ export class TerminalTabComponent extends BaseTabComponent {
        if (this.sessionCloseSubscription) {
            this.sessionCloseSubscription.unsubscribe()
        }
-        this.resize$.complete()
+        this.resize_.complete()
        this.input$.complete()
        this.output$.complete()
        this.contentUpdated$.complete()

--- a/terminus-terminal/src/persistence/tmux.ts
+++ b/terminus-terminal/src/persistence/tmux.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'
 import { execFileSync } from 'child_process'
 import * as AsyncLock from 'async-lock'
 import { ConnectableObservable, AsyncSubject, Subject } from 'rxjs'
+import { first, publish } from 'rxjs/operators'
 import * as childProcess from 'child_process'

 import { Logger } from 'terminus-core'
@@ -102,7 +103,7 @@ export class TMuxCommandProcess {
            }
        })

-        this.response$ = this.block$.publish()
+        this.response$ = this.block$.asObservable().pipe(publish()) as ConnectableObservable<TMuxBlock>
        this.response$.connect()

        this.block$.subscribe(block => {
@@ -116,7 +117,7 @@ export class TMuxCommandProcess {

    command (command: string): Promise<TMuxBlock> {
        return this.lock.acquire('key', () => {
-            let p = this.response$.take(1).toPromise()
+            let p = this.response$.pipe(first()).toPromise()
            this.logger.debug('command:', command)
            this.process.stdin.write(command + '\n')
            return p

--- a/terminus-terminal/src/services/sessions.service.ts
+++ b/terminus-terminal/src/services/sessions.service.ts
 const psNode = require('ps-node')
 let nodePTY
 import * as fs from 'mz/fs'
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
+import { first } from 'rxjs/operators'
 import { Injectable, Inject } from '@angular/core'
 import { Logger, LogService, ElectronService, ConfigService } from 'terminus-core'
 import { exec } from 'mz/child_process'
@@ -17,25 +18,34 @@ export interface IChildProcess {
 export abstract class BaseSession {
    open: boolean
    name: string
-    output$ = new Subject<string>()
-    closed$ = new Subject<void>()
-    destroyed$ = new Subject<void>()
    recoveryId: string
    truePID: number
+    output$: Observable<string>
+    closed$: Observable<void>
+    destroyed$: Observable<void>
+    protected output_ = new Subject<string>()
+    protected closed_ = new Subject<void>()
+    protected destroyed_ = new Subject<void>()
    private initialDataBuffer = ''
    private initialDataBufferReleased = false

+    constructor () {
+        this.output$ = this.output_.asObservable()
+        this.closed$ = this.closed_.asObservable()
+        this.destroyed$ = this.destroyed_.asObservable()
+    }
+
    emitOutput (data: string) {
        if (!this.initialDataBufferReleased) {
            this.initialDataBuffer += data
        } else {
-            this.output$.next(data)
+            this.output_.next(data)
        }
    }

    releaseInitialDataBuffer () {
        this.initialDataBufferReleased = true
-        this.output$.next(this.initialDataBuffer)
+        this.output_.next(this.initialDataBuffer)
        this.initialDataBuffer = null
    }

@@ -49,9 +59,9 @@ export abstract class BaseSession {
    async destroy (): Promise<void> {
        if (this.open) {
            this.open = false
-            this.closed$.next()
-            this.destroyed$.next()
-            this.output$.complete()
+            this.closed_.next()
+            this.destroyed_.next()
+            this.output_.complete()
            await this.gracefullyKillProcess()
        }
    }
@@ -220,7 +230,7 @@ export class SessionsService {
        options.name = `session-${this.lastID}`
        let session = new Session(options)
        let persistence = this.getPersistence()
-        session.destroyed$.first().subscribe(() => {
+        session.destroyed$.pipe(first()).subscribe(() => {
            delete this.sessions[session.name]
            if (persistence) {
                persistence.terminateSession(session.recoveryId)

--- a/terminus-terminal/src/services/terminal.service.ts
+++ b/terminus-terminal/src/services/terminal.service.ts
-import { AsyncSubject } from 'rxjs'
+import { Observable, AsyncSubject } from 'rxjs'
 import { Injectable, Inject } from '@angular/core'
 import { AppService, Logger, LogService, ConfigService } from 'terminus-core'
 import { IShell, ShellProvider } from '../api'
@@ -7,7 +7,8 @@ import { TerminalTabComponent } from '../components/terminalTab.component'

 @Injectable()
 export class TerminalService {
-    shells$ = new AsyncSubject<IShell[]>()
+    shells$: Observable<IShell[]>
+    private shells_ = new AsyncSubject<IShell[]>()
    private logger: Logger

    constructor (
@@ -26,10 +27,11 @@ export class TerminalService {
    }

    async reloadShells () {
-        this.shells$ = new AsyncSubject<IShell[]>()
+        this.shells_ = new AsyncSubject<IShell[]>()
+        this.shells$ = this.shells_.asObservable()
        let shellLists = await Promise.all(this.config.enabledServices(this.shellProviders).map(x => x.provide()))
-        this.shells$.next(shellLists.reduce((a, b) => a.concat(b)))
-        this.shells$.complete()
+        this.shells_.next(shellLists.reduce((a, b) => a.concat(b)))
+        this.shells_.complete()
    }

    async openTab (shell?: IShell, cwd?: string): Promise<TerminalTabComponent> {

--- a/terminus-terminal/webpack.config.js
+++ b/terminus-terminal/webpack.config.js
@@ -18,27 +18,31 @@ module.exports = {
    extensions: ['.ts', '.js'],
  },
  module: {
-    loaders: [
+    rules: [
      {
        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        query: {
-          configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
-          paths: {
-            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-            "*": [path.resolve(__dirname, '../app/node_modules/*')],
-          }
-        }
+        use: {
+          loader: 'awesome-typescript-loader',
+          query: {
+            configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            typeRoots: [path.resolve(__dirname, 'node_modules/@types')],
+            paths: {
+              "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+              "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            }
+          },
+        },
      },
      { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
      { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
      {
        test: /\.(ttf|eot|otf|woff|woff2|ogg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: "url-loader",
-        options: {
-          limit: 999999999999,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 999999999999,
+          }
        }
      },
    ]

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,9 +2,9 @@
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
-    "declaration": false,
    "noImplicitAny": false,
    "removeComments": false,
+    "emitDeclarationOnly": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,

--- a/yarn.lock
+++ b/yarn.lock