chore: update to Angular 13 and TypeScript 4.4

Author: xidedix

.browserslistrc

@@ -14,4 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.gitignore

@@ -32,6 +32,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -4,7 +4,7 @@
 [![@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-^12.2.0-lightgrey.svg?style=flat-square&logo=angular)
+![angular](https://img.shields.io/badge/angular-^13.0.0-lightgrey.svg?style=flat-square&logo=angular)
 
 [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular
 [npm-coreui-angular-badge]: https://img.shields.io/npm/v/@coreui/angular.png?style=flat-square
@@ -14,7 +14,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 4 Angular 12 Free Admin Template
+# CoreUI 4 Angular 13 Free Admin Template
 
 CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
 
@@ -60,7 +60,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular 12 requires `Node.js` version 12.22 or later.
+Angular 13 requires `Node.js` version `^12.20`, `^14.15` or `^16.10`.
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).

package.json

@@ -14,42 +14,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.0",
-    "@angular/cdk": "~12.2.0",
-    "@angular/common": "~12.2.0",
-    "@angular/compiler": "~12.2.0",
-    "@angular/core": "~12.2.0",
-    "@angular/forms": "~12.2.0",
-    "@angular/language-service": "~12.2.0",
-    "@angular/platform-browser": "~12.2.0",
-    "@angular/platform-browser-dynamic": "~12.2.0",
-    "@angular/router": "~12.2.0",
-    "@coreui/angular": "^4.0.0-alpha.2",
-    "@coreui/angular-chartjs": "^2.0.0-alpha.5",
+    "@angular/animations": "~13.0.0",
+    "@angular/cdk": "~13.0.0",
+    "@angular/common": "~13.0.0",
+    "@angular/compiler": "~13.0.0",
+    "@angular/core": "~13.0.0",
+    "@angular/forms": "~13.0.0",
+    "@angular/language-service": "~13.0.0",
+    "@angular/platform-browser": "~13.0.0",
+    "@angular/platform-browser-dynamic": "~13.0.0",
+    "@angular/router": "~13.0.0",
+    "@coreui/angular": "^4.0.0-alpha.3",
+    "@coreui/angular-chartjs": "^2.0.0-alpha.6",
     "@coreui/chartjs": "^3.0.0",
     "@coreui/coreui": "~4.0.5",
     "@coreui/icons": "^2.1.0",
-    "@coreui/icons-angular": "^3.0.0-alpha.3",
+    "@coreui/icons-angular": "^3.0.0-alpha.4",
     "@coreui/utils": "^1.3.1",
-    "chart.js": "^3.6.0",
+    "chart.js": "^3.6.1",
     "ngx-perfect-scrollbar": "^10.1.1",
-    "rxjs": "~6.6.0",
+    "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.5",
-    "@angular/cli": "~12.2.5",
-    "@angular/compiler-cli": "~12.2.0",
-    "@angular/localize": "~12.2.0",
-    "@types/jasmine": "~3.8.0",
-    "@types/node": "^14.17.34",
-    "jasmine-core": "~3.8.0",
+    "@angular-devkit/build-angular": "~13.0.4",
+    "@angular/cli": "~13.0.4",
+    "@angular/compiler-cli": "~13.0.0",
+    "@angular/localize": "~13.0.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^16.11.11",
+    "jasmine-core": "~3.10.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.3"
+  },
+  "engines": {
+    "node": "^12.20.0 || ^14.15.0 || >=16.10.0",
+    "npm": ">= 6"
   }
 }

src/app/app-routing.module.ts

@@ -99,7 +99,8 @@ const routes: Routes = [
     data: {
       title: 'Register Page'
     }
-  }
+  },
+  {path: '**', component: Page404Component}
 ];
 
 @NgModule({

src/app/containers/default-layout/_nav.ts

@@ -216,7 +216,7 @@ export const navItems: INavData[] = [
   },
   {
     name: 'Pages',
-    url: '/',
+    url: '/login',
     iconComponent: { name: 'cil-star' },
     children: [
       {

src/app/containers/default-layout/default-header/default-header.component.html

@@ -30,17 +30,17 @@
 
     <c-header-nav class="d-none d-lg-flex">
       <c-nav-item>
-        <a [routerLink] cNavLink>
+        <a routerLink="./" cNavLink>
           <svg cIcon name="cilBell" size="lg"></svg>
         </a>
       </c-nav-item>
       <c-nav-item>
-        <a [routerLink] cNavLink>
+        <a routerLink="./" cNavLink>
           <svg cIcon name="cilList" size="lg"></svg>
         </a>
       </c-nav-item>
       <c-nav-item>
-        <a [routerLink] cNavLink>
+        <a routerLink="./" cNavLink>
           <svg cIcon name="cilEnvelopeOpen" size="lg"></svg>
         </a>
       </c-nav-item>
@@ -61,7 +61,7 @@
   <c-dropdown alignment="end" variant="nav-item">
     <a
       [caret]="false"
-      [routerLink]
+      routerLink
       cDropdownToggle
       class="py-0"
     >
@@ -79,7 +79,7 @@
         <h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilBell"></svg>
           Updates
           <c-badge class="ms-2 float-end" color="info">
@@ -88,7 +88,7 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilEnvelopeOpen"></svg>
           Messages
           <c-badge class="ms-2 float-end" color="success">
@@ -97,7 +97,7 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilTask"></svg>
           Tasks
           <c-badge class="ms-2 float-end" color="danger">
@@ -106,7 +106,7 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name='cilCommentSquare'></svg>
           Comments
           <c-badge class="ms-auto" color="warning">
@@ -119,19 +119,19 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Settings</h6>
       </li>
       <li></li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilUser"></svg>
           Profile
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilSettings"></svg>
           Settings
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilCreditCard"></svg>
           Payments
           <c-badge class="ms-2 float-end" color="secondary">
@@ -140,7 +140,7 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Settings</h6>
         </a>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilFile"></svg>
           Projects
           <c-badge class="ms-2 float-end" color="primary">
@@ -152,7 +152,7 @@ <h6 cDropdownHeader class="bg-light fw-semibold py-2">Settings</h6>
         <hr cDropdownDivider/>
       </li>
       <li>
-        <a [routerLink] cDropdownItem>
+        <a routerLink="./" cDropdownItem>
           <svg cIcon class="me-2" name="cilLockLocked"></svg>
           Lock Account
         </a>

src/app/containers/default-layout/default-layout.component.html

@@ -18,7 +18,7 @@
       height: 46,
       alt: 'CoreUI Logo'
     }"
-    [routerLink]
+    routerLink="./"
   >
   </c-sidebar-brand>
     <perfect-scrollbar [config]="perfectScrollbarConfig">

src/app/views/base/cards/cards.component.html

@@ -402,15 +402,15 @@ <h3>Using utilities</h3>
                 <c-card-header>
                   <c-nav class="card-header-tabs" variant="tabs">
                     <c-nav-item>
-                      <a [active]="true" cNavLink [routerLink]>
+                      <a [active]="true" cNavLink routerLink="./">
                         Active
                       </a>
                     </c-nav-item>
                     <c-nav-item>
-                      <a cNavLink [routerLink]>Link</a>
+                      <a cNavLink routerLink="./">Link</a>
                     </c-nav-item>
                     <c-nav-item>
-                      <a cNavLink disabled [routerLink]>
+                      <a cNavLink disabled routerLink="./">
                         Disabled
                       </a>
                     </c-nav-item>
@@ -428,15 +428,15 @@ <h3>Using utilities</h3>
                 <c-card-header>
                   <c-nav class="card-header-pills" variant="pills">
                     <c-nav-item>
-                      <a [active]="true" cNavLink [routerLink]>
+                      <a [active]="true" cNavLink routerLink="./">
                         Active
                       </a>
                     </c-nav-item>
                     <c-nav-item>
-                      <a cNavLink [routerLink]>Link</a>
+                      <a cNavLink routerLink="./">Link</a>
                     </c-nav-item>
                     <c-nav-item>
-                      <a cNavLink disabled [routerLink]>
+                      <a cNavLink disabled routerLink="./">
                         Disabled
                       </a>
                     </c-nav-item>

src/app/views/base/carousels/carousels.component.html

@@ -63,7 +63,7 @@
         <c-card-body>
           <p class="text-medium-emphasis small">
             Adding in the previous and next controls with custom content of <code>c-carousel-controls</code> component.
-            <app-docs-example href="components/carousel/#with-controls">&ndash;&gt;-->
+            <app-docs-example href="components/carousel/#with-controls">
               <c-carousel (itemChange)="onItemChange($event)" [interval]="0">
                 <c-carousel-inner>
                   <c-carousel-item *ngFor="let slide of slides[0]">