Upgrade to ng12

angular.json

@@ -62,7 +62,6 @@
             "main": "projects/ngx-highlightjs-demo/src/main.ts",
             "polyfills": "projects/ngx-highlightjs-demo/src/polyfills.ts",
             "tsConfig": "projects/ngx-highlightjs-demo/tsconfig.app.json",
-            "aot": true,
             "assets": [
               "projects/ngx-highlightjs-demo/src/favicon.ico",
               "projects/ngx-highlightjs-demo/src/assets"
@@ -73,7 +72,13 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "highlight.js"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {

package.json

@@ -36,48 +36,48 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.0.2",
-    "@angular/cdk": "^11.0.1",
-    "@angular/common": "~11.0.2",
-    "@angular/compiler": "~11.0.2",
-    "@angular/core": "~11.0.2",
-    "@angular/flex-layout": "^11.0.0-beta.33",
-    "@angular/forms": "~11.0.2",
-    "@angular/material": "^11.0.1",
-    "@angular/platform-browser": "~11.0.2",
-    "@angular/platform-browser-dynamic": "~11.0.2",
-    "@angular/router": "~11.0.2",
+    "@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/flex-layout": "^12.0.0-beta.34",
+    "@angular/forms": "~12.0.2",
+    "@angular/material": "^12.0.2",
+    "@angular/platform-browser": "~12.0.2",
+    "@angular/platform-browser-dynamic": "~12.0.2",
+    "@angular/router": "~12.0.2",
     "highlight.js": "^10.4.1",
     "highlightjs-line-numbers.js": "^2.8.0",
     "ngx-scrollbar": "^7.4.1",
     "normalize.css": "^8.0.1",
     "rxjs": "~6.5.4",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "tslib": "^2.2.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1100.2",
-    "@angular-devkit/core": "^11.0.2",
-    "@angular-devkit/schematics": "^11.0.2",
-    "@angular/cli": "^11.0.2",
-    "@angular/compiler-cli": "^11.0.2",
-    "@angular/language-service": "^11.0.2",
+    "@angular-devkit/build-angular": "^12.0.2",
+    "@angular-devkit/core": "^12.0.2",
+    "@angular-devkit/schematics": "^12.0.2",
+    "@angular/cli": "^12.0.2",
+    "@angular/compiler-cli": "^12.0.2",
+    "@angular/language-service": "^12.0.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "caniuse-lite": "^1.0.30001008",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.1",
+    "karma": "~6.3.3",
     "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",
-    "ng-packagr": "^11.0.3",
+    "ng-packagr": "^12.0.2",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.5"
+    "typescript": "~4.2.4"
   }
 }

projects/ngx-highlightjs-demo/src/app/header/header.component.scss

@@ -1,11 +1,11 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 :host {
   flex: 1;
   color: white;
   display: flex;
   align-items: center;
-  background: mat-color(mat-palette($mat-red, 900));
+  background: mat.get-color-from-palette(mat.define-palette(mat.$red-palette, 900));
   padding: 3em 0;
   font-weight: 300;
 }

projects/ngx-highlightjs-demo/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

projects/ngx-highlightjs-demo/src/polyfills.ts

@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * 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.
 
 
 /***************************************************************************************************

projects/ngx-highlightjs-demo/src/styles.scss

@@ -1,17 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
+@use '~@angular/material' as mat;
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 @import url("https://fonts.googleapis.com/css?family=Roboto:300,500,700");
 @import '~normalize.css';
-@import '~@angular/material/theming';
 
-@include mat-core();
+@include mat.core();
 
-$primary: mat-palette($mat-red, 700);
-$accent: mat-palette($mat-grey, 800);
-$warn: mat-palette($mat-lime, 400);
-$theme: mat-dark-theme($primary, $accent, $warn);
+$primary: mat.define-palette(mat.$red-palette, 700);
+$accent: mat.define-palette(mat.$grey-palette, 800);
+$warn: mat.define-palette(mat.$lime-palette, 400);
+$theme: mat.define-dark-theme($primary, $accent, $warn);
 
-@include angular-material-theme($theme);
+@include mat.all-component-themes($theme);
 
 * {
   box-sizing: border-box;
@@ -23,7 +23,7 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  background: mat-color(mat-palette($mat-red, 900));
+  background: mat.get-color-from-palette(mat.define-palette(mat.$red-palette, 900));
 }
 
 h3 {

projects/ngx-highlightjs-demo/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,

projects/ngx-highlightjs/src/test.ts

@@ -1,7 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

tsconfig.json

@@ -6,7 +6,6 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "module": "es2020",
     "moduleResolution": "node",