feat: update to Angular 12 (#5868)

angular.json

@@ -11,7 +11,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "preserveSymlinks": true,
             "outputPath": "dist",
             "index": "src/index.html",
@@ -56,9 +55,14 @@
               "echarts",
               "lodash",
               "zrender/lib/svg/svg",
-              "zrender/lib/vml/vml",
+              "zrender/lib/vml/vml"
-              "style-loader!leaflet/dist/leaflet.css"
+            ],
-            ]
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -72,7 +76,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -83,7 +86,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

package.json

@@ -14,7 +14,7 @@
     "conventional-changelog": "conventional-changelog",
     "start": "ng serve",
     "build": "ng build",
-    "build:prod": "npm run build -- --prod --aot",
+    "build:prod": "npm run build -- --configuration production --aot",
     "test": "ng test",
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
     "lint": "ng lint",
@@ -31,21 +31,21 @@
   },
   "dependencies": {
     "@akveo/ng2-completer": "^9.0.1",
-    "@angular/animations": "^11.0.9",
+    "@angular/animations": "^12.1.0",
-    "@angular/cdk": "11.0.4",
+    "@angular/cdk": "12.1.0",
-    "@angular/common": "^11.0.9",
+    "@angular/common": "^12.1.0",
-    "@angular/compiler": "^11.0.9",
+    "@angular/compiler": "^12.1.0",
-    "@angular/core": "^11.0.9",
+    "@angular/core": "^12.1.0",
-    "@angular/forms": "^11.0.9",
+    "@angular/forms": "^12.1.0",
-    "@angular/google-maps": "^11.0.4",
+    "@angular/google-maps": "^12.1.0",
-    "@angular/platform-browser": "^11.0.9",
+    "@angular/platform-browser": "^12.1.0",
-    "@angular/platform-browser-dynamic": "^11.0.9",
+    "@angular/platform-browser-dynamic": "^12.1.0",
-    "@angular/router": "^11.0.9",
+    "@angular/router": "^12.1.0",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "7.0.0",
+    "@nebular/auth": "8.0.0",
-    "@nebular/eva-icons": "7.0.0",
+    "@nebular/eva-icons": "8.0.0",
-    "@nebular/security": "7.0.0",
+    "@nebular/security": "8.0.0",
-    "@nebular/theme": "7.0.0",
+    "@nebular/theme": "8.0.0",
     "@swimlane/ngx-charts": "^14.0.0",
     "angular2-chartjs": "0.4.1",
     "bootstrap": "4.3.1",
@@ -71,20 +71,19 @@
     "socicon": "3.0.5",
     "style-loader": "^1.1.3",
     "tinymce": "4.5.7",
-    "tslib": "^2.0.0",
+    "tslib": "^2.1.0",
     "typeface-exo": "0.0.22",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.7",
+    "@angular-devkit/build-angular": "~12.1.0",
-    "@angular/cli": "^11.0.7",
+    "@angular/cli": "^12.1.0",
-    "@angular/compiler-cli": "^11.0.9",
+    "@angular/compiler-cli": "^12.1.0",
-    "@angular/language-service": "11.0.9",
+    "@angular/language-service": "12.1.0",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.39.3",
     "@types/jasmine": "^3.3.0",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
@@ -94,7 +93,7 @@
     "husky": "0.13.3",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.1",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "1.0.1",
     "karma-coverage-istanbul-reporter": "~3.0.2",
@@ -107,6 +106,6 @@
     "ts-node": "3.2.2",
     "tslint": "~6.1.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "4.0.5"
+    "typescript": "^4.2.3"
   }
 }

src/app/pages/maps/leaflet/leaflet.component.scss

@@ -14,4 +14,8 @@
     width: 100%;
     height: nb-theme(card-height-large);
   }
+
+  ::ng-deep .leaflet-control-zoom a {
+    text-decoration: none;
+  }
 }

src/app/pages/maps/leaflet/leaflet.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 import * as L from 'leaflet';
-import 'style-loader!leaflet/dist/leaflet.css';
 
 @Component({
   selector: 'ngx-leaflet',

src/polyfills.ts

@@ -38,7 +38,7 @@ import 'core-js/es7/reflect';
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

tsconfig.json

@@ -7,7 +7,6 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es2015",
     "typeRoots": [