chore: update to Angular 12

Author: xidedix

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -42,27 +45,30 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "coreui:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "coreui:build:production"
+            },
+            "development": {
+              "browserTarget": "coreui:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -77,6 +83,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
+            "inlineStyleLanguage": "scss",
             "styles": [
               "src/scss/style.scss"
             ],
@@ -140,7 +147,8 @@
               "project": "projects/coreui/angular/ng-package.prod.json",
               "tsConfig": "projects/coreui/angular/tsconfig.lib.prod.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -165,9 +173,6 @@
       }
     }
   },
-  "cli": {
-    "analytics": false
-  },
   "defaultProject": "coreui",
   "schematics": {
     "@schematics/angular:component": {

package.json

@@ -16,63 +16,61 @@
   ],
   "scripts": {
     "ng": "ng",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "build-lib:dev": "ng build @coreui/angular --watch",
-    "build-lib:prod": "ng build @coreui/angular --prod",
+    "build-lib:prod": "ng build @coreui/angular --configuration production",
     "test-lib:dev": "ng test @coreui/angular",
     "test-lib:prod": "ng test @coreui/angular --karmaConfig=projects/coreui/angular/karma.conf.github.js",
-    "prestart": "npm run postinstall",
     "start": "ng serve",
     "test": "ng test",
     "lint": "ng lint",
-    "pree2e": "npm run postinstall",
     "e2e": "ng e2e",
     "publish": "cd dist/@coreui/angular/ && npm publish --tag v2-lts --dry-run",
     "link": "cd dist/@coreui/angular/ && npm link",
     "release-version": "node build/change-version.js"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.2.14",
-    "@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/router": "^11.2.14",
+    "@angular/animations": "^12.2.16",
+    "@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/router": "^12.2.16",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.1",
-    "zone.js": "^0.11.5"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.18",
-    "@angular/cli": "^11.2.18",
-    "@angular/compiler-cli": "^11.2.14",
-    "@angular/language-service": "^11.2.14",
+    "@angular-devkit/build-angular": "^12.2.16",
+    "@angular/cli": "^12.2.16",
+    "@angular/compiler-cli": "^12.2.16",
+    "@angular/language-service": "^12.2.16",
     "@coreui/coreui": "^2.1.16",
     "@types/jasmine": "^3.6.11",
+    "@types/jasminewd2": "^2.0.10",
     "@types/node": "^14.18.12",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~5.0.2",
-    "karma": "^5.2.3",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "^6.3.17",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^12.2.7",
     "ngx-perfect-scrollbar": "^10.1.1",
     "protractor": "~7.0.0",
     "shelljs": "^0.8.5",
     "simple-line-icons": "^2.5.5",
     "ts-node": "^9.1.1",
     "tslint": "~6.1.3",
-    "typescript": "~4.0.8"
+    "typescript": "~4.3.5"
   },
   "engines": {
-    "node": ">= 10.19",
+    "node": "^12.20.0 || >=14.0.0",
     "npm": ">= 6"
   }
 }

projects/coreui/angular/package.json

@@ -17,12 +17,12 @@
     }
   ],
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0",
-    "@angular/router": "^11.0.0"
+    "@angular/common": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/router": "^12.0.0"
   },
   "repository": {
     "type": "git",

projects/coreui/angular/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,

projects/coreui/angular/tsconfig.lib.json

@@ -3,9 +3,9 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/lib",
-    "declarationMap": true,
     "target": "es2015",
     "declaration": true,
+    "declarationMap": true,
     "inlineSources": true,
     "types": [],
     "lib": [
@@ -14,7 +14,6 @@
     ]
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
     "flatModuleId": "@coreui/angular",
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,

projects/coreui/angular/tsconfig.lib.prod.json

@@ -5,6 +5,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

src/environments/environment.ts

@@ -12,4 +12,4 @@ export const environment = {
  * import the following file, but please comment it out in production mode
  * because it will have performance impact when throw error
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -20,18 +20,14 @@ import '@angular/localize/init';
  */
 
 /***************************************************************************************************
-* BROWSER POLYFILLS
-*/
+ * BROWSER POLYFILLS
+ */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE11 requires all of the following polyfills. */
-import 'core-js';
-
-/** IE11 requires the following for the Reflect API. */
-import 'core-js/es/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -66,11 +62,10 @@ import 'core-js/es/reflect';
 /***************************************************************************************************
  * 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.
 
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
 (window as any).global = window;
-

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,

tsconfig.json

@@ -1,16 +1,21 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "outDir": "./dist",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
-    "declaration": true,
+    "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
+    "module": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -25,8 +30,9 @@
     }
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }