Update angular material to version 14

.gitignore

@@ -1,3 +1,4 @@
+/.angular/
 node_modules/
 dist/
 .idea/

angular.json

@@ -22,7 +22,6 @@
           "skipTests": true
         },
         "@schematics/angular:module": {
-          "skipTests": true
         },
         "@schematics/angular:pipe": {
           "skipTests": true
@@ -35,7 +34,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "dist/usage-counts",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -56,7 +54,13 @@
               "src/assets/common-assets/common/uikit.min.js",
               "src/assets/common-assets/common/uikit-icons.min.js",
               "node_modules/jquery/dist/jquery.js"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "development": {
@@ -64,7 +68,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -91,7 +94,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -131,7 +133,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -147,7 +148,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -181,18 +183,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -212,18 +202,8 @@
               "devServerTarget": "usage-counts:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
-  },
+  }
-  "defaultProject": "usage-counts"
 }

package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "build-dev": "ng build --configuration=development",
     "build-beta": "ng build --configuration=beta",
-    "build-prod": "ng build --prod",
+    "build-prod": "ng build --configuration production",
     "webpack-bundle-analyzer": "ng build --stats-json && webpack-bundle-analyzer dist/graph/browser/stats.json --host 0.0.0.0",
     "test": "ng test",
     "lint": "ng lint",
@@ -16,32 +16,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.2.14",
+    "@angular/animations": "~14.3.0",
-    "@angular/cdk": "^11.2.13",
+    "@angular/cdk": "^14.2.7",
-    "@angular/common": "~11.2.14",
+    "@angular/common": "~14.3.0",
-    "@angular/compiler": "~11.2.14",
+    "@angular/compiler": "~14.3.0",
-    "@angular/core": "~11.2.14",
+    "@angular/core": "~14.3.0",
-    "@angular/forms": "~11.2.14",
+    "@angular/forms": "~14.3.0",
-    "@angular/localize": "^11.2.14",
+    "@angular/localize": "^14.3.0",
-    "@angular/material": "^11.2.13",
+    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "~11.2.14",
+    "@angular/platform-browser": "~14.3.0",
-    "@angular/platform-browser-dynamic": "~11.2.14",
+    "@angular/platform-browser-dynamic": "~14.3.0",
-    "@angular/router": "~11.2.14",
+    "@angular/router": "~14.3.0",
     "clipboard": "^1.5.16",
     "core-js": "^2.5.4",
     "express": "^4.15.2",
     "jquery": "^3.4.1",
-    "ng-recaptcha": "^7.0.1",
+    "ng-recaptcha": "^10.0.0",
     "rxjs": "^6.5.1",
     "ts-md5": "^1.2.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.14",
+    "@angular-devkit/build-angular": "~14.2.12",
-    "@angular/cli": "~11.2.14",
+    "@angular/cli": "~14.2.12",
-    "@angular/compiler-cli": "~11.2.14",
+    "@angular/compiler-cli": "~14.3.0",
-    "@angular/language-service": "~11.2.14",
+    "@angular/language-service": "~14.3.0",
     "@types/express": "^4.17.0",
     "@types/express-serve-static-core": "4.17.28",
     "@types/node": "^12.11.1",
@@ -57,6 +57,6 @@
     "karma-jasmine-html-reporter": "^1.6.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
-    "typescript": "~4.0.7"
+    "typescript": "~4.6.4"
   }
-}
+}

src/app/analytics/analytics.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {CountryUsageStat, UsageStat} from '../entities/usage-stat';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {Observable, Subscriber, Subscription} from 'rxjs';
 import {UsageStatsService} from '../services/usage-stats.service';
 import {map, startWith} from 'rxjs/operators';
@@ -21,7 +21,7 @@ import {SearchInputComponent} from '../openaireLibrary/sharedComponents/search-i
   styleUrls: ['analytics.component.css'],
 })
 export class AnalyticsComponent implements OnInit, OnDestroy {
-  public countryFb: FormControl;
+  public countryFb: UntypedFormControl;
   public countries: Observable<string[]>;
   public country: string;
   public loading: boolean = true;
@@ -80,7 +80,7 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
   }
   
   private init() {
-    this.countryFb = new FormControl(null);
+    this.countryFb = new UntypedFormControl(null);
     this.countries = this.countryFb.valueChanges
       .pipe(
         startWith(''),

src/app/contact/contact.component.ts

@@ -6,7 +6,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'
 import {Composer} from '../openaireLibrary/utils/email/composer';
 import {Meta, Title} from '@angular/platform-browser';
 import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 import {properties} from '../../environments/environment';
 import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
@@ -24,7 +24,7 @@ export class ContactComponent implements OnInit, OnDestroy {
   public email: Email;
   public properties: EnvProperties = properties;
   
-  public contactForm: FormGroup;
+  public contactForm: UntypedFormGroup;
   @ViewChild('AlertModal') modal;
   description = 'Any questions? Contact us ';
   title = 'OpenAIRE - UsageCounts |  Contact Us';
@@ -34,7 +34,7 @@ export class ContactComponent implements OnInit, OnDestroy {
               private emailService: EmailService,
               private _title: Title, private _piwikService: PiwikService,
               private _meta: Meta, private seoService: SEOService,
-              private fb: FormBuilder) {
+              private fb: UntypedFormBuilder) {
   }
   
   ngOnInit() {

src/material.scss

@@ -1,12 +1,13 @@
+@use '@angular/material' as mat;
 @import '../node_modules/@angular/material/theming';
-@include mat-core();
+@include mat.core();
-$my-app-primary: mat-palette($mat-blue-grey);
+$my-app-primary: mat.define-palette(mat.$blue-grey-palette);
-$my-app-accent:  mat-palette($mat-green);
+$my-app-accent:  mat.define-palette(mat.$green-palette);
-$my-app-warn:    mat-palette($mat-deep-orange);
+$my-app-warn:    mat.define-palette(mat.$deep-orange-palette);
 
-$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
 
-@include angular-material-theme($my-app-theme);
+@include mat.all-component-themes($my-app-theme);
 
 .mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled), .mat-option.mat-active:not(.mat-option-disabled) {
   background-color: #F8CBBB;

src/polyfills.ts

@@ -22,16 +22,6 @@ import '@angular/localize/init';
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -59,7 +49,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
@@ -12,7 +12,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

tsconfig.json

@@ -8,10 +8,9 @@
     "declaration": false,
     "module": "es2020",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],