fix: upgrade to Angular v13

Author: twerske

.gitignore

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

package-lock.json

@@ -11,29 +11,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/forms": "^12.0.0",
-    "@angular/google-maps": "^12.0.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^12.0.0",
-    "@angular/router": "~12.0.0",
-    "rxjs": "~6.6.0",
+    "@angular/animations": "~13.0.1",
+    "@angular/cdk": "^13.0.1",
+    "@angular/common": "^13.0.1",
+    "@angular/compiler": "^13.0.1",
+    "@angular/core": "^13.0.1",
+    "@angular/forms": "^13.0.1",
+    "@angular/google-maps": "^13.0.1",
+    "@angular/material": "^13.0.1",
+    "@angular/platform-browser": "^13.0.1",
+    "@angular/platform-browser-dynamic": "^13.0.1",
+    "@angular/router": "~13.0.1",
+    "rxjs": "^7.4.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/cli": "~12.0.0",
-    "@angular/compiler-cli": "~12.0.0",
+    "@angular-devkit/build-angular": "~13.0.2",
+    "@angular/cli": "~13.0.2",
+    "@angular/compiler-cli": "~13.0.1",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "4.16.1",
-    "@typescript-eslint/parser": "4.16.1",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
     "eslint": "^7.6.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -45,14 +45,14 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.2.3",
+    "typescript": "~4.4.4",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "@angular-eslint/builder": "^4.0.0",
-    "@angular-eslint/eslint-plugin": "^4.0.0",
-    "@angular-eslint/eslint-plugin-template": "^4.0.0",
-    "@angular-eslint/schematics": "12.0.0",
-    "@angular-eslint/template-parser": "^4.0.0"
+    "@angular-eslint/builder": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.0",
+    "@angular-eslint/schematics": "13.0.0-alpha.0",
+    "@angular-eslint/template-parser": "13.0.0-alpha.0"
   }
 }

package.json

@@ -15,6 +15,9 @@
  */
 
 // Adapted from https://codepen.io/osermay/pen/wrKQOd
+
+@use 'sass:math';
+
 $dumpling-light: #efd7b8;
 $dumpling-dark: darken(#efd7b8, 15%);
 $dumpling-size: 100px;
@@ -39,7 +42,7 @@ $fold-size: 20px;
   @include center;
   background-color: $dumpling-light;
   width: $dumpling-size;
-  height: $dumpling-size/2;
+  height: math.div($dumpling-size, 2);
   border-top-left-radius: $dumpling-size;
   border-top-right-radius: $dumpling-size;
   border: #ffe9e9 solid 2px;

src/app/shop/dumpling/dumpling.component.scss

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 // TODO: #12. Enable HighContrast mode
 

src/app/shop/shop.component.scss

@@ -33,18 +33,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * 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

src/polyfills.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@1,700&Lato:wght@400;700;900&display=swap');
 $vollkorn-font-family: 'Vollkorn', serif;

src/styles.scss

@@ -24,15 +24,17 @@ import {
 
 declare const require: {
   context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
     <T>(id: string): T;
+    keys(): string[];
   };
 };
 
 // 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$/);