chore: update to Angular 14

angular.json

@@ -114,6 +114,5 @@
         }
       }
     }
-  },
-  "defaultProject": "coreui-free-angular-admin-template"
+  }
 }

package.json

@@ -14,22 +14,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.3.0",
-    "@angular/cdk": "~13.3.0",
-    "@angular/common": "~13.3.0",
-    "@angular/compiler": "~13.3.0",
-    "@angular/core": "~13.3.0",
-    "@angular/forms": "~13.3.0",
-    "@angular/language-service": "~13.3.0",
-    "@angular/platform-browser": "~13.3.0",
-    "@angular/platform-browser-dynamic": "~13.3.0",
-    "@angular/router": "~13.3.0",
-    "@coreui/angular": "^4.0.2",
-    "@coreui/angular-chartjs": "^2.0.2",
+    "@angular/animations": "^14.0.5",
+    "@angular/cdk": "^14.0.4",
+    "@angular/common": "^14.0.5",
+    "@angular/compiler": "^14.0.5",
+    "@angular/core": "^14.0.5",
+    "@angular/forms": "^14.0.5",
+    "@angular/language-service": "^14.0.5",
+    "@angular/platform-browser": "^14.0.5",
+    "@angular/platform-browser-dynamic": "^14.0.5",
+    "@angular/router": "^14.0.5",
+    "@coreui/angular": "^4.1.0",
+    "@coreui/angular-chartjs": "^4.1.0",
     "@coreui/chartjs": "^3.0.0",
-    "@coreui/coreui": "~4.1.6",
+    "@coreui/coreui": "~4.2.0",
     "@coreui/icons": "^2.1.0",
-    "@coreui/icons-angular": "^3.0.0",
+    "@coreui/icons-angular": "^4.1.0",
     "@coreui/utils": "^1.3.1",
     "chart.js": "^3.7.1",
     "ngx-perfect-scrollbar": "^10.1.1",
@@ -38,19 +38,19 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.0",
-    "@angular/cli": "~13.3.0",
-    "@angular/compiler-cli": "~13.3.0",
-    "@angular/localize": "~13.3.0",
+    "@angular-devkit/build-angular": "^14.0.5",
+    "@angular/cli": "^14.0.5",
+    "@angular/compiler-cli": "^14.0.5",
+    "@angular/localize": "^14.0.5",
     "@types/jasmine": "^4.0.3",
-    "@types/node": "^16.11.31",
-    "jasmine-core": "~4.1.0",
-    "karma": "~6.3.19",
+    "@types/node": "^16.11.43",
+    "jasmine-core": "~4.2.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.0",
+    "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "~4.7.2"
   },
   "engines": {
     "node": "^14.15.0 || >=16.10.0",

src/app/views/base/base-routing.module.ts

@@ -26,6 +26,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'cards',
       },
       {

src/app/views/base/list-groups/list-groups.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-list-groups',
@@ -20,7 +20,7 @@ export class ListGroupsComponent {
   });
 
   constructor(
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
   ) { }
 
   setValue(controlName: string) {

src/app/views/buttons/button-groups/button-groups.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-button-groups',
@@ -13,12 +13,12 @@ export class ButtonGroupsComponent {
     checkbox2: false,
     checkbox3: false
   });
-  formRadio1 = new FormGroup({
-    radio1: new FormControl('Radio1')
+  formRadio1 = new UntypedFormGroup({
+    radio1: new UntypedFormControl('Radio1')
   });
 
   constructor(
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
   ) { }
 
   setCheckBoxValue(controlName: string) {

src/app/views/buttons/buttons-routing.module.ts

@@ -14,6 +14,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'buttons'
       },
       {

src/app/views/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 
 import { DashboardChartsData, IChartProps } from './dashboard-charts-data';
 
@@ -107,8 +107,8 @@ export class DashboardComponent implements OnInit {
   ];
   public mainChart: IChartProps = {};
   public chart: Array<IChartProps> = [];
-  public trafficRadioGroup = new FormGroup({
-    trafficRadio: new FormControl('Month')
+  public trafficRadioGroup = new UntypedFormGroup({
+    trafficRadio: new UntypedFormControl('Month')
   });
 
   ngOnInit(): void {

src/app/views/forms/checks-radios/checks-radios.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-checks-radios',
@@ -35,7 +35,7 @@ export class ChecksRadiosComponent {
 
 
   constructor(
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
   ) { }
 
   setCheckBoxValue(controlName: string) {

src/app/views/forms/forms-routing.module.ts

@@ -19,6 +19,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'form-control'
       },
       {

src/app/views/icons/icons-routing.module.ts

@@ -12,6 +12,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'coreui-icons'
       },
       {

src/app/views/notifications/notifications-routing.module.ts

@@ -15,6 +15,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'badges'
       },
       {

src/app/views/notifications/toasters/toasters.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -35,13 +35,13 @@ export class ToastersComponent implements OnInit {
 
   formChanges!: Observable<any>;
 
-  toasterForm = new FormGroup({
-    autohide: new FormControl(this.autohide),
-    delay: new FormControl({value: this.delay, disabled: !this.autohide}),
-    position: new FormControl(this.position),
-    fade: new FormControl({value: true, disabled: false}),
-    closeButton: new FormControl(true),
-    color: new FormControl('')
+  toasterForm = new UntypedFormGroup({
+    autohide: new UntypedFormControl(this.autohide),
+    delay: new UntypedFormControl({value: this.delay, disabled: !this.autohide}),
+    position: new UntypedFormControl(this.position),
+    fade: new UntypedFormControl({value: true, disabled: false}),
+    closeButton: new UntypedFormControl(true),
+    color: new UntypedFormControl('')
   });
 
   @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;

src/app/views/theme/theme-routing.module.ts

@@ -13,6 +13,7 @@ const routes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
         redirectTo: 'colors',
       },
       {

src/components/docs-example/docs-example.component.ts

@@ -34,8 +34,8 @@ export class DocsExampleComponent implements AfterContentInit, AfterViewInit {
     const version = packageJson?.config?.coreui_library_short_version;
     const docsUrl = packageJson?.config?.coreui_library_docs_url ?? 'https://coreui.io/angular/';
     // const path: string = version ? `${version}/#/${value}` : '#';
-    const path: string = version ? `${version}/${value}` : '';
-    this._href = `${docsUrl}${path}`;
+    // const path: string = version ? `${version}/${value}` : '';
+    this._href = `${docsUrl}${value}`;
   }
 
   ngAfterContentInit(): void {

tsconfig.json

@@ -16,7 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2020",