build: update to Angular, CLI, and Material to v12

- update other dependencies
- fix npm audit warnings

Author: Splaktar

angular.json

@@ -24,7 +24,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "dist/",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -38,10 +37,14 @@
               "angular-aria",
               "angular-material",
               "angular-messages",
-              "angular-sanitize",
-              "zone.js/dist/zone-error",
-              "zone.js/dist/zone"
-            ]
+              "angular-sanitize"
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -53,9 +56,7 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-angular-material-hybrid-demo",
-  "version": "0.5.2",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "ng": "ng",
@@ -9,25 +9,25 @@
     "build:templates": "gulp templates",
     "watch:templates": "gulp watch",
     "build": "npm run build:templates && ng build",
-    "build:prod": "npm run build:templates && ng build --prod",
+    "build:prod": "npm run build:templates && ng build -c production",
     "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
     "lint": "ng lint",
     "smex": "source-map-explorer",
     "deploy": "npm run build:templates && ng deploy",
     "update": "npm-check -u"
   },
   "dependencies": {
-    "@angular/animations": "11.2.1",
-    "@angular/cdk": "11.2.1",
-    "@angular/common": "11.2.1",
-    "@angular/compiler": "11.2.1",
-    "@angular/core": "11.2.1",
-    "@angular/fire": "^6.1.4",
-    "@angular/forms": "11.2.1",
-    "@angular/material": "11.2.1",
-    "@angular/platform-browser": "11.2.1",
-    "@angular/platform-browser-dynamic": "11.2.1",
-    "@angular/upgrade": "11.2.1",
+    "@angular/animations": "12.0.2",
+    "@angular/cdk": "12.0.2",
+    "@angular/common": "12.0.2",
+    "@angular/compiler": "12.0.2",
+    "@angular/core": "12.0.2",
+    "@angular/fire": "^6.1.5",
+    "@angular/forms": "12.0.2",
+    "@angular/material": "12.0.2",
+    "@angular/platform-browser": "12.0.2",
+    "@angular/platform-browser-dynamic": "12.0.2",
+    "@angular/upgrade": "12.0.2",
     "@schuchard/prettier": "^5.0.0",
     "@types/angular": "^1.8.1",
     "@types/angular-material": "^1.1.72",
@@ -37,36 +37,36 @@
     "angular-material": "^1.2.2",
     "angular-messages": "^1.8.2",
     "angular-sanitize": "^1.8.2",
-    "firebase": "^8.2.9",
-    "rxjs": "^6.6.3",
-    "tslib": "^2.1.0",
+    "firebase": "^8.6.3",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1102.1",
-    "@angular-devkit/build-angular": "~0.1102.1",
-    "@angular/cli": "~11.2.1",
-    "@angular/compiler-cli": "~11.2.1",
-    "@angular/language-service": "~11.2.1",
+    "@angular-devkit/architect": "^0.1200.2",
+    "@angular-devkit/build-angular": "~12.0.2",
+    "@angular/cli": "~12.0.2",
+    "@angular/compiler-cli": "~12.0.2",
+    "@angular/language-service": "~12.0.2",
     "@types/gulp": "^4.0.8",
     "@types/node": "^14.14.31",
-    "codelyzer": "^6.0.1",
+    "codelyzer": "^6.0.2",
     "debug": "^4.3.1",
-    "firebase-tools": "^9.4.0",
+    "firebase-tools": "^9.12.0",
     "gulp": "~4.0.2",
     "gulp-angular-templatecache": "~3.0.0",
     "gulp-htmlmin": "~5.0.1",
-    "husky": "4.3.6",
-    "lint-staged": "^10.5.4",
+    "husky": "~4.3.8",
+    "lint-staged": "^11.0.0",
     "npm-check": "^5.9.2",
     "prettier": "^2.2.1",
-    "rxjs-tslint-rules": "^4.34.7",
+    "rxjs-tslint-rules": "^4.34.8",
     "source-map-explorer": "^2.5.2",
     "ts-node": "^9.1.1",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "1.18.0",
     "tsutils": "^3.20.0",
-    "typescript": "~4.0.5"
+    "typescript": "~4.2.4"
   },
   "husky": {
     "hooks": {

package.json

@@ -1,38 +1,38 @@
+@use '~@angular/material' as mat;
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 
 // 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/
-$app-primary: mat-palette($mat-indigo);
-$app-accent: mat-palette($mat-green);
+$app-primary: mat.define-palette(mat.$indigo-palette);
+$app-accent: mat.define-palette(mat.$green-palette);
 
 // The warn palette is optional (defaults to red).
-$app-warn: mat-palette($mat-red);
+$app-warn: mat.define-palette(mat.$red-palette);
 
 // Override the grey background with white
-$mat-light-theme-background: (
-  status-bar: map_get($mat-grey, 300),
-  app-bar: map_get($mat-grey, 100),
-  background: map_get($mat-grey, A100),
+mat.$light-theme-background-palette: (
+  status-bar: map_get(mat.$grey-palette, 300),
+  app-bar: map_get(mat.$grey-palette, 100),
+  background: map_get(mat.$grey-palette, A100),
   hover: rgba(black, 0.04),
   card: white,
   dialog: white,
   disabled-button: rgba(black, 0.12),
   raised-button: white,
-  focused-button: $dark-focused,
-  selected-button: map_get($mat-grey, 300),
-  selected-disabled-button: map_get($mat-grey, 400),
-  disabled-button-toggle: map_get($mat-grey, 200),
-  unselected-chip: map_get($mat-grey, 300),
-  disabled-list-option: map_get($mat-grey, 200),
-  tooltip: map_get($mat-grey, 700),
+  focused-button: rgba(black, 0.12),
+  selected-button: map_get(mat.$grey-palette, 300),
+  selected-disabled-button: map_get(mat.$grey-palette, 400),
+  disabled-button-toggle: map_get(mat.$grey-palette, 200),
+  unselected-chip: map_get(mat.$grey-palette, 300),
+  disabled-list-option: map_get(mat.$grey-palette, 200),
+  tooltip: map_get(mat.$grey-palette, 700)
 );
 
 // Create the theme object (a Sass map containing all of the palettes).
-$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
+$app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);
 
-$custom-typography: mat-typography-config(
-  $body-1: mat-typography-level(16px, 24px, 400),
+$custom-typography: mat.define-typography-config(
+  $body-1: mat.define-typography-level(16px, 24px, 400),
 );

src/_theme.scss

@@ -1,6 +1,6 @@
-import { version } from '../../package.json';
+import packageInfo from '../../package.json';
 
 export const environment = {
   production: true,
-  version,
+  version: packageInfo.version,
 };

src/environments/environment.prod.ts

@@ -1,12 +1,12 @@
-import { version } from '../../package.json';
+import packageInfo from '../../package.json';
 
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
   production: false,
-  version,
+  version: packageInfo.version,
 };
 
 /*

src/environments/environment.ts

@@ -1,21 +1,22 @@
-@import 'theme';
+@use '~@angular/material' as mat;
+@use 'theme';
 
 // 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($custom-typography);
+@include mat.core(theme.$custom-typography);
 
 // 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 mat-core-theme($app-theme);
-@include mat-button-theme($app-theme);
-@include mat-icon-theme($app-theme);
-@include mat-toolbar-theme($app-theme);
-@include mat-divider-theme($app-theme);
-@include mat-expansion-panel-theme($app-theme);
-@include mat-progress-spinner-theme($app-theme);
-@include mat-tabs-theme($app-theme);
+@include mat.core-theme(theme.$app-theme);
+@include mat.button-theme(theme.$app-theme);
+@include mat.icon-theme(theme.$app-theme);
+@include mat.toolbar-theme(theme.$app-theme);
+@include mat.divider-theme(theme.$app-theme);
+@include mat.expansion-theme(theme.$app-theme);
+@include mat.progress-spinner-theme(theme.$app-theme);
+@include mat.tabs-theme(theme.$app-theme);
 
 /* You can add global styles to this file, and also import other style files */
 

src/styles.scss

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitReturns": true,