build: upgrade to Angular and Components v8 (#1056)

Fixes #1029

Author: CaerusKaru

package.json

@@ -26,30 +26,29 @@
     "universal:serve": "gulp universal:serve"
   },
   "version": "7.0.0-beta.24",
-  "requiredAngularVersion": ">=7.0.0-rc.0",
+  "requiredAngularVersion": ">=8.0.0-rc.0",
   "dependencies": {
-    "@angular/cdk": "^7.0.3",
-    "@angular/common": "^7.0.3",
-    "@angular/compiler": "^7.0.3",
-    "@angular/core": "^7.0.3",
-    "@angular/platform-browser": "^7.0.3",
+    "@angular/cdk": "^8.0.0-rc.1",
+    "@angular/common": "^8.0.0-rc.4",
+    "@angular/compiler": "^8.0.0-rc.4",
+    "@angular/core": "^8.0.0-rc.4",
+    "@angular/platform-browser": "^8.0.0-rc.4",
     "core-js": "^2.5.7",
     "karma-parallel": "^0.3.1",
-    "rxjs": "^6.3.0",
+    "rxjs": "^6.5.1",
     "systemjs": "0.19.43",
     "tsickle": "^0.32.0",
     "tslib": "^1.9.3",
-    "zone.js": "~0.8.27"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular/animations": "^7.0.3",
-    "@angular/compiler-cli": "^7.0.3",
-    "@angular/forms": "^7.0.3",
-    "@angular/http": "^7.0.3",
-    "@angular/material": "^7.0.3",
-    "@angular/platform-browser-dynamic": "^7.0.3",
-    "@angular/platform-server": "^7.0.3",
-    "@angular/router": "^7.0.3",
+    "@angular/animations": "^8.0.0-rc.4",
+    "@angular/compiler-cli": "^8.0.0-rc.4",
+    "@angular/forms": "^8.0.0-rc.4",
+    "@angular/material": "^8.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^8.0.0-rc.4",
+    "@angular/platform-server": "^8.0.0-rc.4",
+    "@angular/router": "^8.0.0-rc.4",
     "@google-cloud/storage": "^1.7.0",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.5",
@@ -121,7 +120,7 @@
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.11.0",
-    "typescript": "~3.2.2",
+    "typescript": "~3.4.5",
     "uglify-js": "^2.8.14"
   }
 }

src/apps/demo-app/package.json

@@ -14,13 +14,12 @@
   "dependencies": {
     "@angular/animations": "file:../../../node_modules/@angular/animations",
     "@angular/cdk": "file:../../../node_modules/@angular/cdk",
-    "@angular/cli": "^7.0.0-rc.2",
+    "@angular/cli": "^8.0.0-rc.4",
     "@angular/common": "file:../../../node_modules/@angular/common",
     "@angular/compiler": "file:../../../node_modules/@angular/compiler",
     "@angular/core": "file:../../../node_modules/@angular/core",
     "@angular/flex-layout": "file:../../../dist/releases/flex-layout/angular-flex-layout.tgz",
     "@angular/forms": "file:../../../node_modules/@angular/forms",
-    "@angular/http": "file:../../../node_modules/@angular/http",
     "@angular/material": "file:../../../node_modules/@angular/material",
     "@angular/platform-browser": "file:../../../node_modules/@angular/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../../node_modules/@angular/platform-browser-dynamic",
@@ -31,13 +30,13 @@
     "zone.js": "file:../../../node_modules/zone.js"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.9.0-rc.1",
+    "@angular-devkit/build-angular": "~0.800.0-rc.4",
     "@angular/compiler-cli": "file:../../../node_modules/@angular/compiler-cli",
-    "@angular/language-service": "^6.0.0",
+    "@angular/language-service": "^8.0.0-rc.4",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",

src/apps/hello-world/package.json

@@ -14,13 +14,12 @@
   "dependencies": {
     "@angular/animations": "file:../../../node_modules/@angular/animations",
     "@angular/cdk": "file:../../../node_modules/@angular/cdk",
-    "@angular/cli": "^7.0.0-rc.2",
+    "@angular/cli": "^8.0.0-rc.4",
     "@angular/common": "file:../../../node_modules/@angular/common",
     "@angular/compiler": "file:../../../node_modules/@angular/compiler",
     "@angular/core": "file:../../../node_modules/@angular/core",
     "@angular/flex-layout": "file:../../../dist/releases/flex-layout/angular-flex-layout.tgz",
     "@angular/forms": "file:../../../node_modules/@angular/forms",
-    "@angular/http": "file:../../../node_modules/@angular/http",
     "@angular/material": "file:../../../node_modules/@angular/material",
     "@angular/platform-browser": "file:../../../node_modules/@angular/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../../node_modules/@angular/platform-browser-dynamic",
@@ -30,9 +29,9 @@
     "zone.js": "file:../../../node_modules/zone.js"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.9.0-rc.1",
+    "@angular-devkit/build-angular": "~0.800.0-rc.4",
     "@angular/compiler-cli": "file:../../../node_modules/@angular/compiler-cli",
-    "@angular/language-service": "^6.0.0",
+    "@angular/language-service": "^8.0.0-rc.4",
     "typescript": "file:../../../node_modules/typescript"
   }
 }

src/apps/universal-app/package.json

@@ -22,23 +22,22 @@
     "@angular/core": "file:../../../node_modules/@angular/core",
     "@angular/flex-layout": "file:../../../dist/releases/flex-layout/angular-flex-layout.tgz",
     "@angular/forms": "file:../../../node_modules/@angular/forms",
-    "@angular/http": "file:../../../node_modules/@angular/http",
     "@angular/platform-browser": "file:../../../node_modules/@angular/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../../node_modules/@angular/platform-browser-dynamic",
     "@angular/platform-server": "file:../../../node_modules/@angular/platform-server",
     "@angular/router": "file:../../../node_modules/@angular/router",
-    "@nguniversal/express-engine": "^7.0.2",
+    "@nguniversal/express-engine": "^8.0.0-rc.0",
     "core-js": "^2.5.4",
     "express": "^4.16.2",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.2",
     "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular/cli": "~7.1.2",
+    "@angular-devkit/build-angular": "~0.800.0-rc.4",
+    "@angular/cli": "~8.0.0-rc.4",
     "@angular/compiler-cli": "file:../../../node_modules/@angular/compiler-cli",
-    "@angular/language-service": "~7.1.0",
+    "@angular/language-service": "~8.0.0-rc.4",
     "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",

src/lib/extended/class/class.ts

@@ -5,18 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {
-  Directive,
-  DoCheck,
-  ElementRef,
-  Input,
-  IterableDiffers,
-  KeyValueDiffers,
-  Optional,
-  Renderer2,
-  Self,
-} from '@angular/core';
-import {NgClass} from '@angular/common';
+import {Directive, DoCheck, ElementRef, Input, Optional, Self} from '@angular/core';
+import {NgClass, ɵNgClassImpl, ɵNgClassR2Impl} from '@angular/common';
 import {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core';
 
 export class ClassDirective extends BaseDirective2 implements DoCheck {
@@ -36,17 +26,13 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
   constructor(protected elementRef: ElementRef,
               protected styler: StyleUtils,
               protected marshal: MediaMarshaller,
-              protected iterableDiffers: IterableDiffers,
-              protected keyValueDiffers: KeyValueDiffers,
-              protected renderer: Renderer2,
+              protected delegate: ɵNgClassImpl,
               @Optional() @Self() protected readonly ngClassInstance: NgClass) {
     super(elementRef, null!, styler, marshal);
     if (!this.ngClassInstance) {
       // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
       // the same host element; since the responsive variations may be defined...
-      this.ngClassInstance = new NgClass(
-        this.iterableDiffers, this.keyValueDiffers, this.elementRef, this.renderer
-      );
+      this.ngClassInstance = new NgClass(this.delegate);
     }
     this.init();
     this.setValue('', '');
@@ -81,12 +67,18 @@ const selector = `
   [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]
 `;
 
+// tslint:disable-next-line:variable-name
+export const LayoutNgClassImplProvider = {
+  provide: ɵNgClassImpl,
+  useClass: ɵNgClassR2Impl
+};
+
 /**
  * Directive to add responsive support for ngClass.
  * This maintains the core functionality of 'ngClass' and adds responsive API
  * Note: this class is a no-op when rendered on the server
  */
-@Directive({selector, inputs})
+@Directive({selector, inputs, providers: [LayoutNgClassImplProvider]})
 export class DefaultClassDirective extends ClassDirective {
   protected inputs = inputs;
 }

src/lib/extended/style/style.ts

@@ -10,14 +10,12 @@ import {
   DoCheck,
   ElementRef,
   Inject,
-  KeyValueDiffers,
   Optional,
   PLATFORM_ID,
-  Renderer2,
   SecurityContext,
   Self,
 } from '@angular/core';
-import {isPlatformServer, NgStyle} from '@angular/common';
+import {isPlatformServer, NgStyle, ɵNgStyleImpl, ɵNgStyleR2Impl} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
 import {
   BaseDirective2,
@@ -48,8 +46,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   constructor(protected elementRef: ElementRef,
               protected styler: StyleUtils,
               protected marshal: MediaMarshaller,
-              protected keyValueDiffers: KeyValueDiffers,
-              protected renderer: Renderer2,
+              protected delegate: ɵNgStyleImpl,
               protected sanitizer: DomSanitizer,
               @Optional() @Self() private readonly ngStyleInstance: NgStyle,
               @Optional() @Inject(SERVER_TOKEN) serverLoaded: boolean,
@@ -58,7 +55,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
     if (!this.ngStyleInstance) {
       // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been
       // defined on the same host element; since the responsive variations may be defined...
-      this.ngStyleInstance = new NgStyle(this.keyValueDiffers, this.elementRef, this.renderer);
+      this.ngStyleInstance = new NgStyle(this.delegate);
     }
     this.init();
     const styles = this.nativeElement.getAttribute('style') || '';
@@ -129,11 +126,17 @@ const selector = `
   [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]
 `;
 
+// tslint:disable-next-line:variable-name
+export const LayoutNgStyleImplProvider = {
+  provide: ɵNgStyleImpl,
+  useClass: ɵNgStyleR2Impl
+};
+
 /**
  * Directive to add responsive support for ngStyle.
  *
  */
-@Directive({selector, inputs})
+@Directive({selector, inputs, providers: [LayoutNgStyleImplProvider]})
 export class DefaultStyleDirective extends StyleDirective implements DoCheck {
   protected inputs = inputs;
 }

src/lib/package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/angular/flex-layout#readme",
   "peerDependencies": {
-    "@angular/cdk": "^7.0.0-rc.0",
+    "@angular/cdk": "^8.0.0-rc.0",
     "@angular/core": "0.0.0-NG",
     "@angular/common": "0.0.0-NG",
     "@angular/platform-browser": "0.0.0-NG",