build: upgrade to Angular and CDK v14

Also bump TS target to ES2020 and remove deprecated angular.json
option.

Author: CaerusKaru

angular.json

@@ -244,11 +244,11 @@
               "projects/apps/universal-demo-app/src/assets"
             ],
             "styles": ["projects/apps/universal-demo-app/src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "watch": false
           }
         }
       }
     }
-  },
-  "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"
   },
@@ -29,57 +29,57 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "private": true,
-  "requiredAngularVersion": "^13.0.0",
+  "requiredAngularVersion": "^14.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",
-    "express": "^4.17.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.18.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.5"
   },
   "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",
-    "@types/express": "^4.17.0",
-    "@types/jasmine": "~3.10.0",
+    "@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.13",
+    "@types/jasmine": "~4.0.3",
     "@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",
-    "karma-browserstack-launcher": "^1.6.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "karma-parallel": "^0.3.1",
-    "karma-sauce-launcher": "^2.0.2",
-    "minimatch": "^3.0.4",
-    "ng-packagr": "^13.0.0",
-    "postcss": "^8.3.3",
-    "postcss-scss": "^4.0.2",
+    "jasmine-core": "~4.2.0",
+    "karma": "~6.4.0",
+    "karma-browserstack-launcher": "~1.6.0",
+    "karma-chrome-launcher": "~3.1.1",
+    "karma-coverage": "~2.2.0",
+    "karma-firefox-launcher": "~2.1.2",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "karma-parallel": "~0.3.1",
+    "karma-sauce-launcher": "~4.3.6",
+    "minimatch": "^5.1.0",
+    "ng-packagr": "^14.0.2",
+    "postcss": "^8.4.14",
+    "postcss-scss": "^4.0.4",
     "protractor": "^7.0.0",
-    "stylelint": "^14.1.0",
-    "ts-node": "^10.4.0",
+    "stylelint": "^14.9.1",
+    "ts-node": "^10.8.1",
     "tslint": "^6.1.3",
-    "typescript": "~4.4.3",
-    "webpack": "^5.64.1",
-    "webpack-cli": "^4.9.1"
+    "typescript": "~4.7.3",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.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/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;
 }
 
 

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

@@ -42,7 +42,7 @@ import {
 @Directive()
 export class StyleDirective extends BaseDirective2 implements DoCheck {
 
-  protected DIRECTIVE_KEY = 'ngStyle';
+  protected override DIRECTIVE_KEY = 'ngStyle';
   protected fallbackStyles: NgStyleMap;
   protected isServer: boolean;
 
@@ -68,7 +68,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   }
 
   /** Add generated styles */
-  protected updateWithValue(value: any) {
+  protected override updateWithValue(value: any) {
     const styles = this.buildStyleMap(value);
     this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles};
     if (this.isServer) {
@@ -78,7 +78,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
   }
 
   /** Remove generated styles */
-  protected clearStyles() {
+  protected override clearStyles() {
     this.ngStyleInstance.ngStyle = this.fallbackStyles;
     this.ngStyleInstance.ngDoCheck();
   }
@@ -136,7 +136,7 @@ const selector = `
  */
 @Directive({selector, inputs})
 export class DefaultStyleDirective extends StyleDirective implements DoCheck {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }
 
 /** Build a styles map from a list of styles, while sanitizing bad values first */

projects/libs/flex-layout/flex/flex-align/flex-align.ts

@@ -58,7 +58,7 @@ const selector = `
 @Directive()
 export class FlexAlignDirective extends BaseDirective2 {
 
-  protected DIRECTIVE_KEY = 'flex-align';
+  protected override DIRECTIVE_KEY = 'flex-align';
 
   constructor(elRef: ElementRef,
               styleUtils: StyleUtils,
@@ -68,12 +68,12 @@ export class FlexAlignDirective extends BaseDirective2 {
     this.init();
   }
 
-  protected styleCache = flexAlignCache;
+  protected override styleCache = flexAlignCache;
 }
 
 const flexAlignCache: Map<string, StyleDefinition> = new Map();
 
 @Directive({selector, inputs})
 export class DefaultFlexAlignDirective extends FlexAlignDirective {
-  protected inputs = inputs;
+  protected override inputs = inputs;
 }