chore: update to Angular 11 and TypeScript 4

Author: xidedix

.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# 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
+
+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
+IE 11 # Angular supports IE 11 only as an opt-in. To opt-out, add the 'not' prefix on this line.

README.md

@@ -41,7 +41,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
       - [Prerequisites](#prerequisites)
           - [Node.js](#nodejs)
           - [Angular CLI](#angular-cli)
-        - [Update to Angular 9](#update-to-angular-9)
+        - [Update to Angular 11](#update-to-angular-9)
   - [Installation](#installation)
     - [Clone repo](#clone-repo)
   - [Usage](#usage)
@@ -62,7 +62,6 @@ CoreUI is built on top of Bootstrap 4 and supports popular frameworks.
 * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
 * [CoreUI Free Bootstrap Admin Template (Ajax)](https://github.com/coreui/coreui-free-bootstrap-admin-template-ajax)
 * [CoreUI Free Angular 2+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
-* 🚧 CoreUI Free .NET Core 2 Admin Template (Available Soon)
 * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
 * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
 
@@ -84,7 +83,7 @@ CoreUI is built on top of Bootstrap 4 and supports popular frameworks.
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 9 requires `Node.js` version 10.13 or later.
+Angular 11 requires `Node.js` version 10.13 or later.
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).
@@ -95,8 +94,8 @@ Install the Angular CLI globally using a terminal/console window.
 npm install -g @angular/cli
 ```
 
-##### Update to Angular 9
-Angular 9 requires `Node.js` version 10.x or newer    
+##### Update to Angular 11
+Angular 11 requires `Node.js` version 10.13 or newer    
 Update guide - see: [https://update.angular.io](https://update.angular.io)
 
 ## Installation

angular.json

@@ -48,7 +48,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

karma.conf.js

@@ -9,15 +9,28 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
-    client:{
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     angularCli: {
       environment: 'dev'
@@ -28,6 +41,7 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    restartOnFileChange: true
   });
 };

package.json

@@ -28,17 +28,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.2.4",
-    "@angular/cdk": "^10.2.7",
-    "@angular/common": "^10.2.4",
-    "@angular/compiler": "^10.2.4",
-    "@angular/core": "^10.2.4",
-    "@angular/forms": "^10.2.4",
-    "@angular/localize": "^10.2.4",
-    "@angular/platform-browser": "^10.2.4",
-    "@angular/platform-browser-dynamic": "^10.2.4",
-    "@angular/router": "^10.2.4",
-    "@coreui/angular": "~2.10.0",
+    "@angular/animations": "^11.0.9",
+    "@angular/cdk": "^11.0.4",
+    "@angular/common": "^11.0.9",
+    "@angular/compiler": "^11.0.9",
+    "@angular/core": "^11.0.9",
+    "@angular/forms": "^11.0.9",
+    "@angular/localize": "^11.0.9",
+    "@angular/platform-browser": "^11.0.9",
+    "@angular/platform-browser-dynamic": "^11.0.9",
+    "@angular/router": "^11.0.9",
+    "@coreui/angular": "~2.11.0",
     "@coreui/coreui": "^2.1.16",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "^2.0.0-rc.0",
@@ -49,7 +49,6 @@
     "core-js": "^3.8.2",
     "flag-icon-css": "^3.5.0",
     "font-awesome": "^4.7.0",
-    "mutationobserver-shim": "^0.3.7",
     "ng2-charts": "^2.4.2",
     "ngx-bootstrap": "^6.2.0",
     "ngx-perfect-scrollbar": "^10.1.0",
@@ -61,25 +60,25 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1002.1",
-    "@angular/cli": "^10.2.1",
-    "@angular/compiler-cli": "^10.2.4",
-    "@angular/language-service": "^10.2.4",
-    "@types/jasmine": "^3.6.2",
+    "@angular-devkit/build-angular": "^0.1100.7",
+    "@angular/cli": "^11.0.7",
+    "@angular/compiler-cli": "^11.0.9",
+    "@angular/language-service": "^11.0.9",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^14.14.20",
-    "codelyzer": "^5.2.2",
+    "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.2.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "^8.10.2",
     "tslint": "~6.1.0",
-    "typescript": "^3.9.7"
+    "typescript": "~4.0.5"
   },
   "engines": {
     "node": ">= 10.13",

src/app/app.routing.ts

@@ -88,7 +88,7 @@ export const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [ RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }) ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

src/polyfills.ts

@@ -2,6 +2,7 @@
  * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
  */
 import '@angular/localize/init';
+
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -15,71 +16,56 @@ import '@angular/localize/init';
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+/** IE11 requires all of the following polyfills. **/
 import 'core-js';
 
-/** IE10 and 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`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-import 'core-js/es/reflect';
-
-// for IE10
-import 'mutationobserver-shim';
-
 /**
- * Required to support Web Animations `@angular/platform-browser/animations`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-(window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-
-/***************************************************************************************************
- * IE10 issues
- */
-
-/**
- * IE10 - some CSS3 properties and HTML5 elements are not fully supported or require prefixed properties for full functionality
- * to let Autoprefixer use old flexbox prefixes - add a browserslist property to the package.json file:
- * "browserslist": [
- * "last 2 versions",
- * "not ie < 10",
- * ]
- */
-
-/**
- * IE10 - TypeError: Object doesn't support property or method 'getRootNode'
- */
-// import 'get-root-node-polyfill/implement'; // Run `npm i get-root-node-polyfill`.

src/tsconfig.spec.json

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {