Upgrade all dependencies (Angular 13)

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -44,7 +44,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -98,19 +97,6 @@
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {

package.json

@@ -11,47 +11,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "^5.1.0",
-    "@angular-material-components/moment-adapter": "^5.0.0",
-    "@angular/animations": "~11.2.11",
-    "@angular/cdk": "^11.2.10",
-    "@angular/common": "~11.2.11",
-    "@angular/compiler": "~11.2.11",
-    "@angular/core": "~11.2.11",
-    "@angular/forms": "~11.2.11",
-    "@angular/material": "^11.2.10",
-    "@angular/platform-browser": "~11.2.11",
-    "@angular/platform-browser-dynamic": "~11.2.11",
-    "@angular/router": "~11.2.11",
-    "angular-auth-oidc-client": "^11.6.6",
-    "matrix-js-sdk": "^9.11.0",
+    "@angular-material-components/datetime-picker": "^7.0.1",
+    "@angular-material-components/moment-adapter": "^7.0.0",
+    "@angular/animations": "~13.1.1",
+    "@angular/cdk": "^13.1.1",
+    "@angular/common": "~13.1.1",
+    "@angular/compiler": "~13.1.1",
+    "@angular/core": "~13.1.1",
+    "@angular/forms": "~13.1.1",
+    "@angular/material": "^13.1.1",
+    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/router": "~13.1.1",
+    "angular-auth-oidc-client": "^13.1.0",
+    "matrix-js-sdk": "^15.3.0",
     "moment": "^2.29.1",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "path": "^0.12.7",
-    "rxjs": "~6.6.7",
-    "tslib": "^1.14.1",
-    "zone.js": "~0.10.2"
+    "rxjs": "^7.4.0",
+    "tslib": "^2.3.1",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.10",
-    "@angular/cli": "^11.2.10",
-    "@angular/compiler-cli": "~11.2.11",
-    "@types/jasmine": "~3.5.0",
+    "@angular-devkit/build-angular": "^13.1.2",
+    "@angular/cli": "^13.1.2",
+    "@angular/compiler-cli": "~13.1.1",
+    "@types/jasmine": "^3.10.2",
     "@types/jasminewd2": "~2.0.3",
-    "@types/matrix-js-sdk": "^9.2.3",
-    "@types/node": "^12.20.6",
+    "@types/matrix-js-sdk": "^11.0.1",
+    "@types/node": "^17.0.5",
     "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.2.0",
+    "jasmine-core": "^3.10.1",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
+    "ts-node": "^10.4.0",
     "tslint": "~6.1.0",
-    "typescript": "^4.0.7"
+    "typescript": "^4.5.4"
   },
   "browser": {
     "crypto": false,

src/custom-theme.scss

@@ -1,26 +1,25 @@
-
 // Custom Theming for Angular Material
+@use '@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$sample-oauth-primary: mat-palette($mat-indigo);
-$sample-oauth-accent: mat-palette($mat-pink, A200, A100, A400);
+$sample-oauth-primary: mat.define-palette(mat.$indigo-palette);
+$sample-oauth-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$sample-oauth-warn: mat-palette($mat-red);
+$sample-oauth-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$sample-oauth-theme: mat-light-theme((
+$sample-oauth-theme: mat.define-light-theme((
   color: (
     primary: $sample-oauth-primary,
     accent: $sample-oauth-accent,
@@ -31,5 +30,5 @@ $sample-oauth-theme: mat-light-theme((
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($sample-oauth-theme);
+@include mat.all-component-themes($sample-oauth-theme);
 

src/polyfills.ts

@@ -20,17 +20,8 @@
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /** Evergreen browsers require these. **/
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */

src/test.ts

@@ -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$/);