87968: Upgrade to Angular 12

.browserslistrc

@@ -2,10 +2,16 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

angular.json

@@ -17,7 +17,6 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "extractCss": true,
             "preserveSymlinks": true,
             "customWebpackConfig": {
               "path": "./webpack/webpack.browser.ts",
@@ -76,7 +75,6 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

package.json

@@ -50,25 +50,25 @@
     "webdriver-manager": "^12.1.8"
   },
   "dependencies": {
-    "@angular/animations": "~11.2.14",
-    "@angular/cdk": "^11.2.13",
-    "@angular/common": "~11.2.14",
-    "@angular/compiler": "~11.2.14",
-    "@angular/core": "~11.2.14",
-    "@angular/forms": "~11.2.14",
-    "@angular/localize": "11.2.14",
-    "@angular/platform-browser": "~11.2.14",
-    "@angular/platform-browser-dynamic": "~11.2.14",
-    "@angular/platform-server": "~11.2.14",
-    "@angular/router": "~11.2.14",
-    "@kolkov/ngx-gallery": "^1.2.3",
+    "@angular/animations": "~12.2.16",
+    "@angular/cdk": "^12.2.13",
+    "@angular/common": "~12.2.16",
+    "@angular/compiler": "~12.2.16",
+    "@angular/core": "~12.2.16",
+    "@angular/forms": "~12.2.16",
+    "@angular/localize": "12.2.16",
+    "@angular/platform-browser": "~12.2.16",
+    "@angular/platform-browser-dynamic": "~12.2.16",
+    "@angular/platform-server": "~12.2.16",
+    "@angular/router": "~12.2.16",
+    "@kolkov/ngx-gallery": "1.2.3",
     "@ng-bootstrap/ng-bootstrap": "9.1.3",
     "@ng-dynamic-forms/core": "^13.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^13.0.0",
-    "@ngrx/effects": "^11.1.1",
-    "@ngrx/router-store": "^11.1.1",
-    "@ngrx/store": "^11.1.1",
-    "@nguniversal/express-engine": "11.2.1",
+    "@ngrx/effects": "^12.5.1",
+    "@ngrx/router-store": "^12.5.1",
+    "@ngrx/store": "^12.5.1",
+    "@nguniversal/express-engine": "^12.1.3",
     "@ngx-translate/core": "^13.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
     "angular-idle-preload": "3.0.0",
@@ -102,7 +102,7 @@
     "mirador-share-plugin": "^0.11.0",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
-    "ng-mocks": "11.11.2",
+    "ng-mocks": "^12.5.1",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
     "ngx-infinite-scroll": "^10.0.1",
@@ -111,7 +111,7 @@
     "ngx-sortablejs": "^11.1.0",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
-    "postcss-cli": "^8.3.0",
+    "postcss-cli": "^9.1.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
     "sortablejs": "1.13.0",
@@ -119,19 +119,19 @@
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "^0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "10.0.1",
-    "@angular-devkit/build-angular": "~0.1102.15",
-    "@angular/cli": "~11.2.15",
-    "@angular/compiler-cli": "~11.2.14",
-    "@angular/language-service": "~11.2.14",
+    "@angular-builders/custom-webpack": "~12.1.3",
+    "@angular-devkit/build-angular": "~12.2.16",
+    "@angular/cli": "~12.2.16",
+    "@angular/compiler-cli": "~12.2.16",
+    "@angular/language-service": "~12.2.16",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^5.5.0",
-    "@ngrx/store-devtools": "^11.1.1",
-    "@ngtools/webpack": "10.2.3",
-    "@nguniversal/builders": "~11.2.1",
+    "@ngrx/store-devtools": "^12.5.1",
+    "@ngtools/webpack": "~12.2.16",
+    "@nguniversal/builders": "^12.1.3",
     "@types/deep-freeze": "0.1.2",
     "@types/express": "^4.17.9",
     "@types/file-saver": "^2.0.1",
@@ -145,8 +145,9 @@
     "compression-webpack-plugin": "^3.0.1",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
-    "css-loader": "3.4.0",
-    "cssnano": "^4.1.10",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "cssnano": "^5.0.6",
     "cypress": "9.5.1",
     "cypress-axe": "^0.13.0",
     "debug-loader": "^0.0.1",
@@ -154,8 +155,8 @@
     "dotenv": "^8.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.0",
-    "jasmine-core": "~3.6.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jasmine-core": "^3.8.0",
     "jasmine-marbles": "0.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "^6.3.14",
@@ -164,12 +165,12 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
+    "ngx-mask": "^12.0.0",
     "nodemon": "^2.0.15",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-apply": "0.11.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "6.7.0",
+    "postcss": "^8.1",
+    "postcss-apply": "0.12.0",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^4.0.3",
     "postcss-responsive-type": "1.0.0",
     "protractor": "^7.0.0",
     "protractor-istanbul-plugin": "2.0.0",
@@ -178,15 +179,16 @@
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "rxjs-spy": "^7.5.3",
+    "sass": "~1.32.6",
     "sass-resources-loader": "^2.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
-    "string-replace-loader": "^2.3.0",
+    "string-replace-loader": "^3.1.0",
     "terser-webpack-plugin": "^2.3.1",
     "ts-loader": "^5.2.0",
     "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
-    "typescript": "~4.0.5",
-    "webpack": "^4.44.2",
+    "typescript": "~4.3.5",
+    "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.5.0"

server.ts

@@ -15,7 +15,7 @@
  * import for `ngExpressEngine`.
  */
 
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 import 'reflect-metadata';
 import 'rxjs';
 

src/main.browser.ts

@@ -1,4 +1,4 @@
-import 'zone.js/dist/zone';
+import 'zone.js';
 import 'reflect-metadata';
 import 'core-js/es/reflect';
 
@@ -35,11 +35,9 @@ const main = () => {
   if (hasValue(environment.universal) && environment.universal.preboot) {
     return bootstrap();
   } else {
-
     return fetch('assets/config.json')
       .then((response) => response.json())
       .then((appConfig: AppConfig) => {
-
         // extend environment with app config for browser when not prerendered
         extendEnvironmentWithAppConfig(environment, appConfig);
 

src/main.server.ts

@@ -1,5 +1,5 @@
 import 'core-js/es/reflect';
-import 'zone.js/dist/zone';
+import 'zone.js';
 import 'reflect-metadata';
 
 import { enableProdMode } from '@angular/core';

src/modules/app/server-app.module.ts

@@ -59,8 +59,8 @@ export function createTranslateLoader() {
         deps: []
       }
     }),
+    AppModule,
     ServerModule,
-    AppModule
   ],
   providers: [
     // Initialize app config and extend environment

src/polyfills.ts

@@ -59,7 +59,7 @@
 import 'core-js/es';
 import 'core-js/features/reflect';
 
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 import 'reflect-metadata';
 

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,

src/typings.d.ts

@@ -39,7 +39,6 @@ interface SystemJS {
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;
-declare var Zone: { current: any };
 interface GlobalEnvironment {
   ENV;
   HMR;

webpack/webpack.browser.ts

@@ -5,9 +5,6 @@ import { commonExports } from './webpack.common';
 
 module.exports = Object.assign({}, commonExports, {
   target: 'web',
-  node: {
-    module: 'empty'
-  },
   devServer: {
     before(app, server) {
       buildAppConfig(join(process.cwd(), 'src/assets/config.json'));

webpack/webpack.common.ts

@@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
+const sass = require('sass');
 
 export const copyWebpackOptions = {
   patterns: [
@@ -40,7 +41,8 @@ export const copyWebpackOptions = {
   ]
 };
 
-const SCSS_LOADERS = [{
+const SCSS_LOADERS = [
+  {
     loader: 'postcss-loader',
     options: {
       sourceMap: true
@@ -50,6 +52,10 @@ const SCSS_LOADERS = [{
     loader: 'sass-loader',
     options: {
       sourceMap: true,
+      // sass >1.33 complains about deprecation warnings in Bootstrap 4
+      // After upgrading to Angular 12 we need to explicitly use an older version here
+      // todo: remove after upgrading to Bootstrap 5
+      implementation: sass,
       sassOptions: {
         includePaths: [projectRoot('./')]
       }
@@ -99,5 +105,5 @@ export const commonExports = {
         ]
       },
     ],
-  }
+  },
 };

webpack/webpack.test.ts

@@ -2,7 +2,4 @@ import { commonExports } from './webpack.common';
 
 module.exports = Object.assign({}, commonExports, {
   target: 'web',
-  node: {
-    module: 'empty'
-  }
 });