build: upgrade to latest Angular and CDK RC (#1177)

Author: CaerusKaru

package.json

@@ -28,13 +28,13 @@
     "postinstall": "ngcc --properties es2015 browser module main --create-ivy-entry-points"
   },
   "version": "8.0.0-beta.27",
-  "requiredAngularVersion": ">=9.0.0-rc.6",
+  "requiredAngularVersion": ">=9.0.0-rc.11",
   "dependencies": {
-    "@angular/cdk": "^9.0.0-rc.5",
-    "@angular/common": "^9.0.0-rc.6",
-    "@angular/compiler": "^9.0.0-rc.6",
-    "@angular/core": "^9.0.0-rc.6",
-    "@angular/platform-browser": "^9.0.0-rc.6",
+    "@angular/cdk": "^9.0.0-rc.8",
+    "@angular/common": "^9.0.0-rc.11",
+    "@angular/compiler": "^9.0.0-rc.11",
+    "@angular/core": "^9.0.0-rc.11",
+    "@angular/platform-browser": "^9.0.0-rc.11",
     "core-js": "^2.5.7",
     "karma-parallel": "^0.3.1",
     "rxjs": "^6.5.1",
@@ -44,13 +44,13 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular/animations": "^9.0.0-rc.6",
-    "@angular/compiler-cli": "^9.0.0-rc.6",
-    "@angular/forms": "^9.0.0-rc.6",
-    "@angular/material": "^9.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.6",
-    "@angular/platform-server": "^9.0.0-rc.6",
-    "@angular/router": "^9.0.0-rc.6",
+    "@angular/animations": "^9.0.0-rc.11",
+    "@angular/compiler-cli": "^9.0.0-rc.11",
+    "@angular/forms": "^9.0.0-rc.11",
+    "@angular/material": "^9.0.0-rc.8",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.11",
+    "@angular/platform-server": "^9.0.0-rc.11",
+    "@angular/router": "^9.0.0-rc.11",
     "@firebase/app-types": "^0.3.2",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.5",
@@ -120,7 +120,7 @@
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.11.0",
-    "typescript": "~3.6.4",
+    "typescript": "~3.7.5",
     "uglify-js": "^2.8.14"
   },
   "// Gulp": "Overwrite graceful-fs to a version that does not rely on the 'natives' package. This fixes gulp for >= 10.13, more information: angular/angular#28213",

src/lib/core/style-utils/style-utils.ts

@@ -5,7 +5,7 @@
  * 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 {Inject, Injectable, Optional, PLATFORM_ID} from '@angular/core';
+import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
 import {isPlatformBrowser, isPlatformServer} from '@angular/common';
 
 import {applyCssPrefixes} from '../../utils/auto-prefixer';
@@ -16,8 +16,8 @@ import {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config';
 @Injectable({providedIn: 'root'})
 export class StyleUtils {
 
-  constructor(@Optional() private _serverStylesheet: StylesheetMap,
-              @Optional() @Inject(SERVER_TOKEN) private _serverModuleLoaded: boolean,
+  constructor(private _serverStylesheet: StylesheetMap,
+              @Inject(SERVER_TOKEN) private _serverModuleLoaded: boolean,
               @Inject(PLATFORM_ID) private _platformId: Object,
               @Inject(LAYOUT_CONFIG) private layoutConfig: LayoutConfigOptions) {}
 

src/lib/extended/class/class.ts

@@ -5,8 +5,18 @@
  * 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, Optional, Self} from '@angular/core';
-import {NgClass, ɵNgClassImpl, ɵNgClassR2Impl} from '@angular/common';
+import {
+  Directive,
+  DoCheck,
+  ElementRef,
+  Input,
+  IterableDiffers,
+  KeyValueDiffers,
+  Optional,
+  Renderer2,
+  Self,
+} from '@angular/core';
+import {NgClass} from '@angular/common';
 import {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core';
 
 @Directive()
@@ -24,16 +34,18 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
     this.setValue(val, '');
   }
 
-  constructor(protected elementRef: ElementRef,
-              protected styler: StyleUtils,
-              protected marshal: MediaMarshaller,
-              protected delegate: ɵNgClassImpl,
+  constructor(elementRef: ElementRef,
+              styler: StyleUtils,
+              marshal: MediaMarshaller,
+              iterableDiffers: IterableDiffers,
+              keyValueDiffers: KeyValueDiffers,
+              renderer2: Renderer2,
               @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.delegate);
+      this.ngClassInstance = new NgClass(iterableDiffers, keyValueDiffers, elementRef, renderer2);
     }
     this.init();
     this.setValue('', '');
@@ -68,18 +80,12 @@ 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, providers: [LayoutNgClassImplProvider]})
+@Directive({selector, inputs})
 export class DefaultClassDirective extends ClassDirective {
   protected inputs = inputs;
 }

src/lib/extended/img-src/img-src.ts

@@ -34,10 +34,10 @@ export class ImgSrcDirective extends BaseDirective2 {
     this.setValue(this.defaultSrc, '');
   }
 
-  constructor(protected elementRef: ElementRef,
-              protected styleBuilder: ImgSrcStyleBuilder,
-              protected styler: StyleUtils,
-              protected marshal: MediaMarshaller,
+  constructor(elementRef: ElementRef,
+              styleBuilder: ImgSrcStyleBuilder,
+              styler: StyleUtils,
+              marshal: MediaMarshaller,
               @Inject(PLATFORM_ID) protected platformId: Object,
               @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {
     super(elementRef, styleBuilder, styler, marshal);

src/lib/extended/show-hide/show-hide.ts

@@ -10,7 +10,6 @@ import {
   ElementRef,
   OnChanges,
   SimpleChanges,
-  Optional,
   Inject,
   PLATFORM_ID,
   Injectable,
@@ -50,13 +49,13 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
   protected hasLayout = false;
   protected hasFlexChild = false;
 
-  constructor(protected elementRef: ElementRef,
-              protected styleBuilder: ShowHideStyleBuilder,
-              protected styler: StyleUtils,
-              protected marshal: MediaMarshaller,
+  constructor(elementRef: ElementRef,
+              styleBuilder: ShowHideStyleBuilder,
+              styler: StyleUtils,
+              marshal: MediaMarshaller,
               @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,
               @Inject(PLATFORM_ID) protected platformId: Object,
-              @Optional() @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {
+              @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {
     super(elementRef, styleBuilder, styler, marshal);
   }
 

src/lib/extended/style/style.ts

@@ -10,12 +10,14 @@ import {
   DoCheck,
   ElementRef,
   Inject,
+  KeyValueDiffers,
   Optional,
   PLATFORM_ID,
+  Renderer2,
   SecurityContext,
   Self,
 } from '@angular/core';
-import {isPlatformServer, NgStyle, ɵNgStyleImpl, ɵNgStyleR2Impl} from '@angular/common';
+import {isPlatformServer, NgStyle} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
 import {
   BaseDirective2,
@@ -44,19 +46,20 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   protected fallbackStyles: NgStyleMap;
   protected isServer: boolean;
 
-  constructor(protected elementRef: ElementRef,
-              protected styler: StyleUtils,
-              protected marshal: MediaMarshaller,
-              protected delegate: ɵNgStyleImpl,
+  constructor(elementRef: ElementRef,
+              styler: StyleUtils,
+              marshal: MediaMarshaller,
               protected sanitizer: DomSanitizer,
+              differs: KeyValueDiffers,
+              renderer2: Renderer2,
               @Optional() @Self() private readonly ngStyleInstance: NgStyle,
-              @Optional() @Inject(SERVER_TOKEN) serverLoaded: boolean,
+              @Inject(SERVER_TOKEN) serverLoaded: boolean,
               @Inject(PLATFORM_ID) platformId: Object) {
     super(elementRef, null!, styler, marshal);
     if (!this.ngStyleInstance) {
       // Create an instance NgStyle Directive instance only if `ngStyle=""` has NOT been
       // defined on the same host element; since the responsive variations may be defined...
-      this.ngStyleInstance = new NgStyle(this.delegate);
+      this.ngStyleInstance = new NgStyle(elementRef, differs, renderer2);
     }
     this.init();
     const styles = this.nativeElement.getAttribute('style') || '';
@@ -127,17 +130,11 @@ 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, providers: [LayoutNgStyleImplProvider]})
+@Directive({selector, inputs})
 export class DefaultStyleDirective extends StyleDirective implements DoCheck {
   protected inputs = inputs;
 }

src/lib/flex/flex-align/flex-align.ts

@@ -5,7 +5,7 @@
  * 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, ElementRef, Injectable, Optional} from '@angular/core';
+import {Directive, ElementRef, Injectable} from '@angular/core';
 import {
   MediaMarshaller,
   BaseDirective2,
@@ -60,12 +60,10 @@ export class FlexAlignDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'flex-align';
 
-  constructor(protected elRef: ElementRef,
-              protected styleUtils: StyleUtils,
-              // NOTE: not actually optional, but we need to force DI without a
-              // constructor call
-              @Optional() protected styleBuilder: FlexAlignStyleBuilder,
-              protected marshal: MediaMarshaller) {
+  constructor(elRef: ElementRef,
+              styleUtils: StyleUtils,
+              styleBuilder: FlexAlignStyleBuilder,
+              marshal: MediaMarshaller) {
     super(elRef, styleBuilder, styleUtils, marshal);
     this.init();
   }

src/lib/flex/flex-fill/flex-fill.ts

@@ -37,10 +37,10 @@ export class FlexFillStyleBuilder extends StyleBuilder {
  */
 @Directive({selector: `[fxFill], [fxFlexFill]`})
 export class FlexFillDirective extends BaseDirective2 {
-  constructor(protected elRef: ElementRef,
-              protected styleUtils: StyleUtils,
-              protected styleBuilder: FlexFillStyleBuilder,
-              protected marshal: MediaMarshaller) {
+  constructor(elRef: ElementRef,
+              styleUtils: StyleUtils,
+              styleBuilder: FlexFillStyleBuilder,
+              marshal: MediaMarshaller) {
     super(elRef, styleBuilder, styleUtils, marshal);
     this.addStyles('');
   }

src/lib/flex/flex-offset/flex-offset.ts

@@ -5,13 +5,7 @@
  * 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,
-  ElementRef,
-  OnChanges,
-  Optional,
-  Injectable,
-} from '@angular/core';
+import {Directive, ElementRef, OnChanges, Injectable} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   MediaMarshaller,
@@ -69,13 +63,11 @@ const selector = `
 export class FlexOffsetDirective extends BaseDirective2 implements OnChanges {
   protected DIRECTIVE_KEY = 'flex-offset';
 
-  constructor(protected elRef: ElementRef,
+  constructor(elRef: ElementRef,
               protected directionality: Directionality,
-              // NOTE: not actually optional, but we need to force DI without a
-              // constructor call
-              @Optional() protected styleBuilder: FlexOffsetStyleBuilder,
-              protected marshal: MediaMarshaller,
-              protected styler: StyleUtils) {
+              styleBuilder: FlexOffsetStyleBuilder,
+              marshal: MediaMarshaller,
+              styler: StyleUtils) {
     super(elRef, styleBuilder, styler, marshal);
     this.init([this.directionality.change]);
     // Parent DOM `layout-gap` with affect the nested child with `flex-offset`

src/lib/flex/flex-order/flex-order.ts

@@ -5,7 +5,7 @@
  * 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, ElementRef, OnChanges, Injectable, Optional} from '@angular/core';
+import {Directive, ElementRef, OnChanges, Injectable} from '@angular/core';
 import {
   BaseDirective2,
   StyleBuilder,
@@ -44,12 +44,10 @@ export class FlexOrderDirective extends BaseDirective2 implements OnChanges {
 
   protected DIRECTIVE_KEY = 'flex-order';
 
-  constructor(protected elRef: ElementRef,
-              protected styleUtils: StyleUtils,
-              // NOTE: not actually optional, but we need to force DI without a
-              // constructor call
-              @Optional() protected styleBuilder: FlexOrderStyleBuilder,
-              protected marshal: MediaMarshaller) {
+  constructor(elRef: ElementRef,
+              styleUtils: StyleUtils,
+              styleBuilder: FlexOrderStyleBuilder,
+              marshal: MediaMarshaller) {
     super(elRef, styleBuilder, styleUtils, marshal);
     this.init();
   }