Merge pull request #3021 from IgniteUI/14.0.0-update

feat(ng14): migrating the project

Author: Konstantin Dinev

angular.json

@@ -357,7 +357,6 @@
             }
         }
     },
-    "defaultProject": "my-app",
     "schematics": {
         "@schematics/angular:component": {
             "prefix": "app",

package-lock.json

@@ -40,31 +40,31 @@
     "url": "git://github.com/IgniteUI/igniteui-angular-samples/repository.git"
   },
   "dependencies": {
-    "@angular/animations": "^13.2.1",
-    "@angular/cdk": "^13.1.1",
-    "@angular/common": "^13.2.1",
-    "@angular/compiler": "^13.2.1",
-    "@angular/core": "^13.2.1",
-    "@angular/forms": "^13.2.1",
-    "@angular/localize": "^13.2.1",
-    "@angular/material": "^13.1.1",
-    "@angular/platform-browser": "^13.2.1",
-    "@angular/platform-browser-dynamic": "^13.2.1",
-    "@angular/router": "^13.2.1",
+    "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/localize": "^14.0.0",
+    "@angular/material": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
     "@igniteui/material-icons-extended": "^2.10.0",
     "@microsoft/signalr": "^5.0.11",
-    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@types/file-saver": "^2.0.2",
     "@types/hammerjs": "^2.0.39",
     "angular-in-memory-web-api": "0.9.0",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.1.3",
     "core-js": "2.6.2",
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^13.2.0",
-    "igniteui-angular-charts": "^12.1.1",
-    "igniteui-angular-core": "^12.1.1",
+    "igniteui-angular": "^14.0.0-beta.1",
+    "igniteui-angular-charts": "^13.1.1",
+    "igniteui-angular-core": "^13.1.1",
     "igniteui-angular-i18n": "^12.2.4",
     "igniteui-dockmanager": "^1.7.0",
     "igniteui-live-editing": "^1.1.3",
@@ -79,24 +79,24 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.1",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/schematics": "13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "^13.1.2",
-    "@angular/compiler-cli": "^13.2.1",
-    "@angular/language-service": "^13.2.1",
-    "@igniteui/angular-schematics": "^13.0.904",
+    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular-eslint/builder": "^14.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "^14.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "^14.0.0-alpha.0",
+    "@angular-eslint/schematics": "14.0.0-alpha.0",
+    "@angular-eslint/template-parser": "^14.0.0-alpha.0",
+    "@angular/cli": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/language-service": "^14.0.0",
+    "@igniteui/angular-schematics": "^13.2.920",
     "@juggle/resize-observer": "^3.3.1",
     "@types/jasmine": "^3.10.2",
     "@types/jasminewd2": "^2.0.9",
     "@types/node": "^13.13.52",
     "@typescript-eslint/eslint-plugin": "5.3.0",
     "@typescript-eslint/parser": "5.3.0",
     "codelyzer": "^6.0.2",
-    "eslint": "^8.2.0",
+    "eslint": "^8.17.0",
     "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
@@ -112,10 +112,10 @@
     "karma-jasmine": "~3.3.0",
     "karma-jasmine-html-reporter": "^1.6.0",
     "protractor": "~7.0.0",
-    "sass-embedded": "^1.0.0-beta.4",
+    "sass-embedded": "^1.52.2",
     "sass.js": "0.11.1",
     "ts-node": "^8.8.1",
-    "typescript": "4.4.4",
+    "typescript": "4.7.3",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
+}

package.json

@@ -51,12 +51,6 @@ import { FilterTypePipe, GridDynamicChartDataComponent, NamePipe } from './grid-
         GridDynamicChartDataRoutingModule
     ],
     providers: [],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    entryComponents: [
-        IgxDataChartComponent,
-        IgxItemLegendComponent,
-        IgxLegendComponent,
-        IgxPieChartComponent
-    ]
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridDynamicChartDataModule {}

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.module.ts

@@ -29,10 +29,6 @@ import { DockSlotComponent, GridHostDirective } from './dock-slot.component';
         IgxTabsModule
     ],
     providers: [],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    entryComponents: [
-        IgxGridComponent,
-        DockSlotComponent
-    ]
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridFinJSDockManagerModule { }

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.module.ts

@@ -82,16 +82,6 @@ import { GridsDVRoutingModule } from './grids-routing.module';
         IgxDataChartScatterModule,
         IgxBarSeriesModule,
         IgxCategoryChartModule
-    ],
-    entryComponents: [
-        IgxDoughnutChartComponent,
-        IgxDataChartComponent,
-        IgxCategoryXAxisComponent,
-        IgxNumericYAxisComponent,
-        IgxItemLegendComponent,
-        IgxLegendComponent,
-        IgxNumericXAxisComponent,
-        IgxPieChartComponent
     ]
 })
 export class GridsDVModule { }

projects/app-lob/src/app/grid/grids.module.ts

@@ -1,18 +1,18 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'app-radio-group-sample',
     styleUrls: ['./radio-group-sample.component.scss'],
     templateUrl: './radio-group-sample.component.html'
 })
 export class RadioGroupSampleComponent {
-    public fruitsForm: FormGroup;
+    public fruitsForm: UntypedFormGroup;
     public fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
     public newModel: FruitData;
     public model: FruitData;
 
-    constructor(private _formBuilder: FormBuilder) {
+    constructor(private _formBuilder: UntypedFormBuilder) {
         // Simulate getting data from external service
         this.model = {
             favFruit: this.fruits[0],

src/app/data-entries/radio/radio-group-sample/radio-group-sample.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'app-reactive-form',
@@ -8,14 +8,14 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 })
 export class ReactiveFormsSampleComponent {
     public genres = [];
-    public user: FormGroup;
+    public user: UntypedFormGroup;
     public minTime = '06:15:30';
     public maxTime = '09:15:30';
     public minDate = new Date();
     public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
 
 
-    constructor(fb: FormBuilder) {
+    constructor(fb: UntypedFormBuilder) {
         this.user = fb.group({
             date: ['', Validators.required],
             time: ['', Validators.required],

src/app/how-to/reactive-forms/reactive-forms.component.ts

@@ -130,7 +130,6 @@ import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.com
         DialogStylingSampleComponent,
         TooltipStyleComponent
     ],
-    entryComponents: [MyDynamicCardComponent],
     imports: [
         CommonModule,
         FormsModule,

src/app/interactions/interactions.module.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 import { IgxStepperComponent } from 'igniteui-angular';
 
 @Component({
@@ -83,7 +83,7 @@ export class StepperOverviewSampleComponent {
         this.stepper.next();
     }
 
-    public resetStepper(form1: FormGroup, form2: FormGroup, form3: FormGroup): void {
+    public resetStepper(form1: UntypedFormGroup, form2: UntypedFormGroup, form3: UntypedFormGroup): void {
         this.stepper.reset();
         this.selectedCard = null;
         form1.reset();