build: upgrade to Angular and CDK v14 (#1414)

Author: CaerusKaru

.circleci/config.yml

@@ -9,7 +9,7 @@
 # To validate changes, use an online parser, eg.
 # http://yaml-online-parser.appspot.com/
 
-var_1: &docker_image circleci/node:14.16.1
+var_1: &docker_image cimg/node:16.14.0
 var_2: &cache_key v2-ng-layout-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.7.0
 
 # Settings common to each job
@@ -53,7 +53,7 @@ var_8: &docker-firefox-image
   # TODO(devversion): Temporarily use a image that includes Firefox 62 because the
   # ngcontainer image does include an old Firefox version that does not support headless.
   # See the PR that fixes this: https://github.com/angular/angular/pull/26435
-  - image: circleci/node:14.16.1-browsers
+  - image: cimg/node:16.14.0-browsers
 
 # Attaches the release output which has been stored in the workspace to the current job.
 # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
@@ -64,7 +64,9 @@ var_9: &attach_release_output
 # -----------------------------
 # Container version of CircleCI
 # -----------------------------
-version: 2
+version: 2.1
+orbs:
+  browser-tools: circleci/[email protected]
 
 # -----------------------------------------------------------------------------------------
 # Job definitions. Jobs which are defined just here, will not run automatically. Each job
@@ -103,6 +105,7 @@ jobs:
     steps:
       - *checkout_code
       - *attach_release_output
+      - browser-tools/install-browser-tools
       - run: ./scripts/circleci/run-local-browser-tests.sh
 
   # ----------------------------------------------------------------------------
@@ -111,6 +114,7 @@ jobs:
   # ----------------------------------------------------------------------------
   tests_browserstack:
     <<: *job_defaults
+    resource_class: xlarge
     environment:
       BROWSER_STACK_USERNAME: 'adamplumer1'
       BROWSER_STACK_ACCESS_KEY: 'WgLjxoB2zQ3tqmsznKnz'
@@ -135,6 +139,7 @@ jobs:
     steps:
       - *checkout_code
       - *attach_release_output
+      - browser-tools/install-browser-tools
 
       - run: ./scripts/circleci/run-saucelabs-tests.sh
 

angular.json

@@ -249,6 +249,5 @@
         }
       }
     }
-  },
-  "defaultProject": "@angular/flex-layout"
+  }
 }

package.json

@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": "^12.20.0 || ^14.15.0 || >=16.10.0",
+    "node": "^14.15.0 || >=16.10.0",
     "yarn": ">=1.22.4 <2",
     "npm": "Please use yarn instead of NPM to install dependencies"
   },
@@ -31,34 +31,34 @@
   "private": true,
   "requiredAngularVersion": "^13.0.0",
   "dependencies": {
-    "@angular/animations": "~13.0.0",
-    "@angular/common": "~13.0.0",
-    "@angular/compiler": "~13.0.0",
-    "@angular/core": "~13.0.0",
-    "@angular/forms": "~13.0.0",
-    "@angular/material": "^13.0.2",
-    "@angular/platform-browser": "~13.0.0",
-    "@angular/platform-browser-dynamic": "~13.0.0",
-    "@angular/platform-server": "~13.0.0",
-    "@angular/router": "~13.0.0",
-    "@nguniversal/builders": "^13.0.1",
-    "@nguniversal/express-engine": "^13.0.1",
+    "@angular/animations": "~14.0.0",
+    "@angular/common": "~14.0.0",
+    "@angular/compiler": "~14.0.0",
+    "@angular/core": "~14.0.0",
+    "@angular/forms": "~14.0.0",
+    "@angular/material": "~14.0.0",
+    "@angular/platform-browser": "~14.0.0",
+    "@angular/platform-browser-dynamic": "~14.0.0",
+    "@angular/platform-server": "~14.0.0",
+    "@angular/router": "~14.0.0",
+    "@nguniversal/builders": "~14.0.0",
+    "@nguniversal/express-engine": "~14.0.0",
     "express": "^4.17.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.0",
-    "@angular/cdk": "^13.0.2",
-    "@angular/cli": "~13.0.0",
-    "@angular/compiler-cli": "~13.0.0",
-    "@ngtools/webpack": "^13.0.3",
-    "@nguniversal/builders": "^13.0.1",
+    "@angular-devkit/build-angular": "~14.0.0",
+    "@angular/cdk": "~14.0.0",
+    "@angular/cli": "~14.0.0",
+    "@angular/compiler-cli": "~14.0.0",
+    "@ngtools/webpack": "~14.0.0",
+    "@nguniversal/builders": "~14.0.0",
     "@types/express": "^4.17.0",
     "@types/jasmine": "~3.10.0",
     "@types/minimatch": "^3.0.5",
-    "@types/node": "^12.11.1",
+    "@types/node": "^14.18.21",
     "conventional-changelog-cli": "^2.1.1",
     "jasmine-core": "~3.10.0",
     "karma": "~6.3.0",
@@ -71,15 +71,19 @@
     "karma-parallel": "^0.3.1",
     "karma-sauce-launcher": "^2.0.2",
     "minimatch": "^3.0.4",
-    "ng-packagr": "^13.0.0",
+    "ng-packagr": "~14.0.0",
     "postcss": "^8.3.3",
     "postcss-scss": "^4.0.2",
     "protractor": "^7.0.0",
     "stylelint": "^14.1.0",
     "ts-node": "^10.4.0",
     "tslint": "^6.1.3",
-    "typescript": "~4.4.3",
+    "typescript": "~4.7.3",
     "webpack": "^5.64.1",
     "webpack-cli": "^4.9.1"
+  },
+  "resolutions": {
+    "browser-sync-client": "2.26.13",
+    "**/https-proxy-agent": "5.0.0"
   }
 }

projects/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts

@@ -19,7 +19,7 @@ const selector = `[fxHide], [fxHide.yba]`;
 
 @Directive({selector, inputs})
 export class CustomHideDirective extends ShowHideDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }
 
 @Component({

projects/libs/flex-layout/_private-utils/testing/custom-matchers.ts

@@ -81,23 +81,9 @@ export const customMatchers: jasmine.CustomMatcherFactories = {
   toEqual: function (util) {
     return {
       compare: function (actual: any, expected: any) {
-        return {pass: util.equals(actual, expected, [compareMap])};
+        return {pass: util.equals(actual, expected)};
       }
     };
-
-    function compareMap(actual: any, expected: any) {
-      if (actual instanceof Map) {
-        let pass = actual.size === expected.size;
-        if (pass) {
-          actual.forEach((v: any, k: any) => {
-            pass = pass && util.equals(v, expected.get(k));
-          });
-        }
-        return pass;
-      } else {
-        return undefined;
-      }
-    }
   },
 
   toHaveText: function () {

projects/libs/flex-layout/core/match-media/mock/mock-match-media.ts

@@ -150,7 +150,7 @@ export class MockMatchMedia extends MatchMedia {
    * Call window.matchMedia() to build a MediaQueryList; which
    * supports 0..n listeners for activation/deactivation
    */
-  protected buildMQL(query: string): MediaQueryList {
+  protected override buildMQL(query: string): MediaQueryList {
     return new MockMediaQueryList(query);
   }
 

projects/libs/flex-layout/extended/class/class.ts

@@ -22,7 +22,7 @@ import {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/
 @Directive()
 export class ClassDirective extends BaseDirective2 implements DoCheck {
 
-  protected DIRECTIVE_KEY = 'ngClass';
+  protected override DIRECTIVE_KEY = 'ngClass';
 
   /**
    * Capture class assignments so we cache the default classes
@@ -51,7 +51,7 @@ export class ClassDirective extends BaseDirective2 implements DoCheck {
     this.setValue('', '');
   }
 
-  protected updateWithValue(value: any) {
+  protected override updateWithValue(value: any) {
     this.ngClassInstance.ngClass = value;
     this.ngClassInstance.ngDoCheck();
   }
@@ -87,5 +87,5 @@ const selector = `
  */
 @Directive({selector, inputs})
 export class DefaultClassDirective extends ClassDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }

projects/libs/flex-layout/extended/img-src/img-src.ts

@@ -25,7 +25,7 @@ export class ImgSrcStyleBuilder extends StyleBuilder {
 
 @Directive()
 export class ImgSrcDirective extends BaseDirective2 {
-  protected DIRECTIVE_KEY = 'img-src';
+  protected override DIRECTIVE_KEY = 'img-src';
   protected defaultSrc = '';
 
   @Input('src')
@@ -56,7 +56,7 @@ export class ImgSrcDirective extends BaseDirective2 {
    * Do nothing to standard `<img src="">` usages, only when responsive
    * keys are present do we actually call `setAttribute()`
    */
-  protected updateWithValue(value?: string) {
+  protected override updateWithValue(value?: string) {
     const url = value || this.defaultSrc;
     if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
       this.addStyles(url);
@@ -65,7 +65,7 @@ export class ImgSrcDirective extends BaseDirective2 {
     }
   }
 
-  protected styleCache = imgSrcCache;
+  protected override styleCache = imgSrcCache;
 }
 
 const imgSrcCache: Map<string, StyleDefinition> = new Map();
@@ -93,5 +93,5 @@ const selector = `
  */
 @Directive({selector, inputs})
 export class DefaultImgSrcDirective extends ImgSrcDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }

projects/libs/flex-layout/extended/show-hide/show-hide.ts

@@ -43,7 +43,7 @@ export class ShowHideStyleBuilder extends StyleBuilder {
 
 @Directive()
 export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {
-  protected DIRECTIVE_KEY = 'show-hide';
+  protected override DIRECTIVE_KEY = 'show-hide';
 
   /** Original DOM Element CSS display style */
   protected display: string = '';
@@ -97,7 +97,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
    * Default to use the non-responsive Input value ('fxShow')
    * Then conditionally override with the mq-activated Input's current value
    */
-  ngOnChanges(changes: SimpleChanges) {
+  override ngOnChanges(changes: SimpleChanges) {
     Object.keys(changes).forEach(key => {
       if (this.inputs.indexOf(key) !== -1) {
         const inputKey = key.split('.');
@@ -143,7 +143,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
   }
 
   /** Validate the visibility value and then update the host's inline display style */
-  protected updateWithValue(value: boolean | string = true) {
+  protected override updateWithValue(value: boolean | string = true) {
     if (value === '') {
       return;
     }
@@ -185,5 +185,5 @@ const selector = `
  */
 @Directive({selector, inputs})
 export class DefaultShowHideDirective extends ShowHideDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }

projects/libs/flex-layout/extended/show-hide/show.spec.ts

@@ -386,7 +386,7 @@ const selector = `[fxShow.sm-md], [fxHide.sm-md], [fxShow.sm.lg], [fxHide.sm.lg]
 // Used to test custom breakpoint functionality
 @Directive({inputs, selector})
 class FxShowHideDirective extends ShowHideDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }