chore: update to Angular 11 and TypeScript 4

Author: xidedix

.browserslistrc

@@ -1,10 +1,17 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# 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 IE 9-11 support, please uncomment the last line of the file and adjust as needed
-> 0.5%
-last 2 versions
+
+# 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
-not dead
-IE 10-11
-# IE 9-11
+IE 11 # Angular supports IE 11 only as an opt-in. To opt-out, add the 'not' prefix on this line.

README.md

@@ -2,11 +2,11 @@
 
 [![npm package][npm-coreui-angular-badge-latest]][npm-coreui-angular] 
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]
+![angular](https://img.shields.io/badge/angular-^11.0.9-lightgrey.svg?style=flat-square&logo=angular)  
 [![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular]  
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
 [![NPM downloads][npm-coreui-download]][npm-coreui]    
-![angular](https://img.shields.io/badge/angular-^10.2.0-lightgrey.svg?style=flat-square&logo=angular)  
 
 [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular  
 [npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=red  
@@ -17,7 +17,7 @@
 [npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
 [npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
 
-# CoreUI for Angular 10 - Free WebApp UI Kit built on top of Bootstrap 4 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=,admin,template,dashboard,panel,free,angular,react,vue)
+# CoreUI for Angular 11 - Free WebApp UI Kit built on top of Bootstrap 4 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Bootstrap%204%20Admin%20Template%20&url=https://coreui.io&hashtags=,admin,template,dashboard,panel,free,angular,react,vue)
 
 Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) and [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
 
@@ -56,7 +56,7 @@ CoreUI is an Open Source UI Kit built on top of Bootstrap 4. CoreUI is the faste
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 10 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/).
@@ -67,7 +67,7 @@ Install the Angular CLI globally using a terminal/console window.
 npm install -g @angular/cli
 ```
 
-##### Update to Angular 10
+##### Update to Angular 11
 see: [https://update.angular.io](https://update.angular.io)
 
 ## CoreUI Installation

angular.json

@@ -45,7 +45,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -131,7 +130,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/coreui/angular/tsconfig.lib.json",
             "project": "projects/coreui/angular/ng-package.json"

e2e/src/app.e2e-spec.ts

@@ -15,8 +15,8 @@ describe('CoreUI template', () => {
   //   page.navigateTo();
   // });
 
-  it('should display CoreUI Dashboard', () => {
-    expect(page.getParagraphText()).toEqual('CoreUI Dashboard');
+  it('should display CoreUI Dashboard', async () => {
+    expect(await page.getParagraphText()).toEqual('CoreUI Dashboard');
   });
 
   it('should toggle `sidebar-minimized` body.class on `sidebar-minimizer` click', () => {

package.json

@@ -33,45 +33,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.2.4",
-    "@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",
+    "@angular/animations": "^11.0.9",
+    "@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",
     "rxjs": "^6.6.3",
     "tslib": "^2.0.0",
-    "zone.js": "^0.10.3"
+    "zone.js": "^0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1002.1",
-    "@angular-devkit/build-ng-packagr": "^0.1002.1",
-    "@angular/cli": "^10.2.1",
-    "@angular/compiler-cli": "^10.2.4",
-    "@angular/language-service": "^10.2.4",
+    "@angular-devkit/build-angular": "^0.1100.7",
+    "@angular/cli": "^11.0.7",
+    "@angular/compiler-cli": "^11.0.9",
+    "@angular/language-service": "^11.0.9",
     "@coreui/coreui": "^2.1.16",
-    "@types/jasmine": "^3.6.2",
-    "@types/jasminewd2": "~2.0.8",
+    "@types/jasmine": "~3.6.0",
     "@types/node": "^14.14.20",
-    "codelyzer": "^6.0.1",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "^5.2.3",
     "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",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.0.3",
     "ngx-perfect-scrollbar": "^10.1.0",
     "protractor": "~7.0.0",
     "shelljs": "^0.8.4",
     "simple-line-icons": "^2.5.5",
-    "ts-node": "^8.10.2",
+    "ts-node": "^9.1.1",
     "tslint": "~6.1.0",
-    "typescript": "~3.9.7"
+    "typescript": "~4.0.5"
   },
   "engines": {
     "node": ">= 10.13",

projects/coreui/angular/README.md

@@ -2,11 +2,12 @@
 
 [![npm package][npm-coreui-angular-badge-latest]][npm-coreui-angular] 
 [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]
+![angular](https://img.shields.io/badge/angular-^11.0.9-lightgrey.svg?style=flat-square&logo=angular)  
 [![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular]  
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
 [![NPM downloads][npm-coreui-download]][npm-coreui]
-![angular](https://img.shields.io/badge/angular-^10.2.0-lightgrey.svg?style=flat-square&logo=angular)  
+ 
 
 [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular  
 [npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=red  
@@ -25,7 +26,7 @@
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 10 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/).
@@ -36,7 +37,7 @@ Install the Angular CLI globally using a terminal/console window.
 npm install -g @angular/cli
 ```
 
-##### Update to Angular 10
+##### Update to Angular 11
 see: [https://update.angular.io](https://update.angular.io)
 
 ## CoreUI Installation

projects/coreui/angular/karma.conf.github.js

@@ -9,16 +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: {
+      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/coreui/angular'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/coreui-angular'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

projects/coreui/angular/karma.conf.js

@@ -9,16 +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: {
+      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/coreui/angular'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/coreui-angular'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

projects/coreui/angular/ng-package.prod.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../../dist/@coreui/angular",
+  "deleteDestPath": true,
   "lib": {
     "entryFile": "src/public-api.ts"
   }
-}
+}

projects/coreui/angular/package.json

@@ -20,9 +20,9 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": "^10.2.0",
-    "@angular/core": "^10.2.0",
-    "@angular/router": "^10.2.0",
+    "@angular/common": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/router": "^11.0.0",
     "@coreui/coreui": "^2.1.16"
   },
   "repository": {

projects/coreui/angular/tsconfig.lib.json

@@ -1,11 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/lib",
     "declarationMap": true,
     "target": "es2015",
     "declaration": true,
-    "sourceMap": true,
     "inlineSources": true,
     "types": [],
     "lib": [

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

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

src/app/app.routing.ts

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

src/karma.conf.js

@@ -9,23 +9,36 @@ 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: {
+      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/coreui-test'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    restartOnFileChange: true
   });
-};
+};