chore(deps)!: upgrade to Angular 19

Author: ghiscoding

package.json

@@ -63,31 +63,31 @@
     "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@angular/core": ">=18.0.0"
+    "@angular/core": ">=19.0.0"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
     "@analogjs/platform": "^1.15.0",
     "@analogjs/vite-plugin-angular": "^1.15.0",
     "@analogjs/vitest-angular": "^1.15.0",
-    "@angular-devkit/build-angular": "^18.2.16",
+    "@angular-devkit/build-angular": "^19.2.5",
     "@angular-eslint/builder": "^18.4.3",
     "@angular-eslint/eslint-plugin": "^18.4.3",
     "@angular-eslint/eslint-plugin-template": "^18.4.3",
     "@angular-eslint/schematics": "^18.4.3",
     "@angular-eslint/template-parser": "^18.4.3",
-    "@angular/animations": "^18.2.13",
-    "@angular/build": "18.2.16",
-    "@angular/cli": "^18.2.16",
-    "@angular/common": "^18.2.13",
-    "@angular/compiler": "^18.2.13",
-    "@angular/compiler-cli": "^18.2.13",
-    "@angular/core": "^18.2.13",
-    "@angular/forms": "^18.2.13",
-    "@angular/language-service": "^18.2.13",
-    "@angular/platform-browser": "^18.2.13",
-    "@angular/platform-browser-dynamic": "^18.2.13",
-    "@angular/router": "^18.2.13",
+    "@angular/animations": "^19.2.4",
+    "@angular/build": "19.2.5",
+    "@angular/cli": "^19.2.5",
+    "@angular/common": "^19.2.4",
+    "@angular/compiler": "^19.2.4",
+    "@angular/compiler-cli": "^19.2.4",
+    "@angular/core": "^19.2.4",
+    "@angular/forms": "^19.2.4",
+    "@angular/language-service": "^19.2.4",
+    "@angular/platform-browser": "^19.2.4",
+    "@angular/platform-browser-dynamic": "^19.2.4",
+    "@angular/router": "^19.2.4",
     "@faker-js/faker": "^9.6.0",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
@@ -119,7 +119,7 @@
     "eslint-plugin-n": "^17.17.0",
     "jsdom": "^26.0.0",
     "native-copyfiles": "^0.3.2",
-    "ng-packagr": "^18.2.1",
+    "ng-packagr": "^19.2.0",
     "ngx-bootstrap": "^18.1.3",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.5.3",

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { debounceTime, filter } from 'rxjs';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent implements OnInit {
   constructor(private router: Router) {}

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Injector, NgModule, inject, provideAppInitializer } from '@angular/core';
 import { LOCATION_INITIALIZED } from '@angular/common';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -187,12 +187,10 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     }),
   ],
   providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: appInitializerFactory,
-      deps: [TranslateService, Injector],
-      multi: true,
-    },
+    provideAppInitializer(() => {
+      const initializerFn = appInitializerFactory(inject(TranslateService), inject(Injector));
+      return initializerFn();
+    }),
     provideHttpClient(withInterceptorsFromDi()),
   ],
 })

src/app/examples/custom-buttonFormatter.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   template: `<button (click)="sayHello(item?.title)">{{ item?.title }}</button>`,
+  standalone: false,
 })
 export class CustomButtonFormatterComponent {
   item: any;

src/app/examples/custom-titleFormatter.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   template: `<b>{{ item?.assignee?.name }}</b>`,
+  standalone: false,
 })
 export class CustomTitleFormatterComponent {
   item: any;

src/app/examples/editor-ng-select.component.ts

@@ -19,6 +19,7 @@ import { Subject } from 'rxjs';
       {{ item?.name }}
     </ng-template>
   </ng-select>`,
+  standalone: false,
 })
 export class EditorNgSelectComponent {
   selectedId = '';

src/app/examples/filter-ng-select.component.ts

@@ -18,6 +18,7 @@ import { Subject } from 'rxjs';
       {{ item?.name }}
     </ng-template>
   </ng-select>`,
+  standalone: false,
 })
 export class FilterNgSelectComponent {
   selectedId = '';

src/app/examples/grid-additem.component.ts

@@ -16,6 +16,7 @@ import {
   styles: ['.duration-bg { background-color: #e9d4f1 !important }'],
   encapsulation: ViewEncapsulation.None,
   templateUrl: './grid-additem.component.html',
+  standalone: false,
 })
 export class GridAddItemComponent implements OnInit {
   title = 'Example 11: Add / Update / Highlight a Datagrid Item';

src/app/examples/grid-angular.component.ts

@@ -27,6 +27,7 @@ const NB_ITEMS = 100;
   styleUrls: ['./grid-angular.component.scss'],
   encapsulation: ViewEncapsulation.None,
   providers: [AngularUtilService],
+  standalone: false,
 })
 export class GridAngularComponent implements OnInit {
   title = 'Example 22: Use of Angular Components';

src/app/examples/grid-autoheight.component.ts

@@ -14,6 +14,7 @@ import {
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./grid-autoheight.component.scss'],
   templateUrl: './grid-autoheight.component.html',
+  standalone: false,
 })
 export class GridAutoHeightComponent implements OnInit {
   title = 'Example 23: Grid AutoHeight';

src/app/examples/grid-base-row-editing.component.ts

@@ -11,6 +11,7 @@ const NB_ITEMS = 20;
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./grid-base-row-editing.component.scss'],
   templateUrl: './grid-base-row-editing.component.html',
+  standalone: false,
 })
 export class GridBaseRowEditingComponent implements OnInit {
   private subscriptions: Subscription[] = [];

src/app/examples/grid-basic.component.ts

@@ -6,6 +6,7 @@ const NB_ITEMS = 995;
 
 @Component({
   templateUrl: './grid-basic.component.html',
+  standalone: false,
 })
 export class GridBasicComponent implements OnDestroy, OnInit {
   private _darkModeGrid1 = false;

src/app/examples/grid-clientside.component.ts

@@ -25,6 +25,7 @@ const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_500_numbers.json';
 
 @Component({
   templateUrl: './grid-clientside.component.html',
+  standalone: false,
 })
 export class GridClientSideComponent implements OnInit {
   title = 'Example 4: Client Side Sort/Filter';

src/app/examples/grid-colspan.component.ts

@@ -6,6 +6,7 @@ import { AngularGridInstance, Column, FieldType, GridOption, ItemMetadata } from
 @Component({
   templateUrl: './grid-colspan.component.html',
   styleUrls: ['./grid-colspan.component.scss'],
+  standalone: false,
 })
 export class GridColspanComponent implements OnInit {
   title = 'Example 15: Column Span & Header Grouping';

src/app/examples/grid-composite-editor.component.ts

@@ -86,6 +86,7 @@ const myCustomTitleValidator = (value: any, args: any) => {
   templateUrl: './grid-composite-editor.component.html',
   styleUrls: ['./grid-composite-editor.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridCompositeEditorComponent implements OnDestroy, OnInit {
   private _darkMode = false;

src/app/examples/grid-contextmenu.component.ts

@@ -62,6 +62,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont
   templateUrl: './grid-contextmenu.component.html',
   styleUrls: ['./grid-contextmenu.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridContextMenuComponent implements OnInit, OnDestroy {
   title = 'Example 26: Cell Menu & Context Menu Plugins';

src/app/examples/grid-custom-pager.component.ts

@@ -12,6 +12,7 @@ import type {
 @Component({
   templateUrl: './grid-custom-pager.component.html',
   styleUrls: ['./grid-custom-pager.component.scss'],
+  standalone: false,
 })
 export class CustomPagerComponent implements BasePaginationComponent {
   protected _paginationElement!: HTMLDivElement;

src/app/examples/grid-custom-pagination.component.ts

@@ -22,6 +22,7 @@ function randomBetween(min: number, max: number): number {
 @Component({
   templateUrl: './grid-custom-pagination.component.html',
   providers: [AngularUtilService],
+  standalone: false,
 })
 export class GridCustomPaginationComponent implements OnInit {
   pageSize = 50;

src/app/examples/grid-custom-tooltip.component.ts

@@ -22,6 +22,7 @@ const NB_ITEMS = 500;
   templateUrl: './grid-custom-tooltip.component.html',
   styleUrls: ['./grid-custom-tooltip.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridCustomTooltipComponent implements OnInit {
   title = 'Example 32: Regular & Custom Tooltips';

src/app/examples/grid-drag-recycle.component.ts

@@ -12,6 +12,7 @@ import {
   templateUrl: './grid-drag-recycle.component.html',
   styleUrls: ['./grid-drag-recycle.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridDragRecycleComponent implements OnInit {
   angularGrid!: AngularGridInstance;

src/app/examples/grid-draggrouping.component.ts

@@ -21,6 +21,7 @@ import {
 
 @Component({
   templateUrl: './grid-draggrouping.component.html',
+  standalone: false,
 })
 export class GridDraggableGroupingComponent implements OnInit, OnDestroy {
   private _darkMode = false;

src/app/examples/grid-editor.component.ts

@@ -62,6 +62,7 @@ const taskFormatter: Formatter = (_row, _cell, value) => {
 };
 @Component({
   templateUrl: './grid-editor.component.html',
+  standalone: false,
 })
 export class GridEditorComponent implements OnInit {
   title = 'Example 3: Editors / Delete';

src/app/examples/grid-excel-formula.component.ts

@@ -98,6 +98,7 @@ export class CustomSumAggregator implements Aggregator {
   templateUrl: './grid-excel-formula.component.html',
   styleUrls: ['./grid-excel-formula.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridExcelFormulaComponent implements OnInit {
   columnDefinitions: Column<GroceryItem>[] = [];

src/app/examples/grid-footer-totals.component.ts

@@ -12,6 +12,7 @@ const NB_ITEMS = 100;
 
 @Component({
   templateUrl: './grid-footer-totals.component.html',
+  standalone: false,
 })
 export class GridFooterTotalsComponent implements OnDestroy, OnInit {
   private _darkMode = false;

src/app/examples/grid-formatter.component.ts

@@ -32,6 +32,7 @@ const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: n
 
 @Component({
   templateUrl: './grid-formatter.component.html',
+  standalone: false,
 })
 export class GridFormatterComponent implements OnInit {
   title = 'Example 2: Grid with Formatters';

src/app/examples/grid-frozen.component.ts

@@ -16,6 +16,7 @@ import {
   templateUrl: './grid-frozen.component.html',
   styleUrls: ['./grid-frozen.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridFrozenComponent implements OnInit, OnDestroy {
   title = 'Example 20: Pinned (frozen) Columns/Rows';

src/app/examples/grid-graphql-nopage.component.ts

@@ -34,6 +34,7 @@ export interface Country {
   templateUrl: './grid-graphql-nopage.component.html',
   styleUrls: ['./grid-graphql-nopage.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridGraphqlWithoutPaginationComponent implements OnInit {
   title = 'Example 27: GraphQL Basic API without Pagination';

src/app/examples/grid-graphql.component.ts

@@ -26,6 +26,7 @@ const FAKE_SERVER_DELAY = 250;
 
 @Component({
   templateUrl: './grid-graphql.component.html',
+  standalone: false,
 })
 export class GridGraphqlComponent implements OnInit, OnDestroy {
   title = 'Example 6: Grid connected to Backend Server with GraphQL';

src/app/examples/grid-grouping.component.ts

@@ -19,6 +19,7 @@ import {
 
 @Component({
   templateUrl: './grid-grouping.component.html',
+  standalone: false,
 })
 export class GridGroupingComponent implements OnInit {
   title = 'Example 14: Grouping & Aggregators';

src/app/examples/grid-header-footer.component.ts

@@ -7,6 +7,7 @@ const NB_ITEMS = 995;
   template: `<button (click)="clickMe()">I'm a button from an Angular component (click me)</button>
     <div *ngIf="clickedTimes">You've clicked me {{ clickedTimes }} time(s)</div>`,
   selector: 'custom-footer',
+  standalone: false,
 })
 export class CustomFooterComponent {
   clickedTimes = 0;
@@ -18,6 +19,7 @@ export class CustomFooterComponent {
 
 @Component({
   templateUrl: './grid-header-footer.component.html',
+  standalone: false,
 })
 export class GridHeaderFooterComponent implements OnInit {
   title = 'Example 34: Custom header & footer Templates';

src/app/examples/grid-headerbutton.component.ts

@@ -10,6 +10,7 @@ let columns2WithHighlightingById: any = {};
   styleUrls: ['./grid-headerbutton.component.scss'],
   encapsulation: ViewEncapsulation.None,
   templateUrl: './grid-headerbutton.component.html',
+  standalone: false,
 })
 export class GridHeaderButtonComponent implements OnInit {
   title = 'Example 7: Header Button Plugin';

src/app/examples/grid-headermenu.component.ts

@@ -7,6 +7,7 @@ import { Subscription } from 'rxjs';
   templateUrl: './grid-headermenu.component.html',
   styleUrls: ['./grid-headermenu.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridHeaderMenuComponent implements OnInit, OnDestroy {
   title = 'Example 8: Header Menu Plugin';

src/app/examples/grid-infinite-graphql.component.ts

@@ -28,6 +28,7 @@ function unescapeAndLowerCase(val: string) {
   styleUrls: ['./grid-infinite-graphql.component.scss'],
   encapsulation: ViewEncapsulation.None,
   templateUrl: './grid-infinite-graphql.component.html',
+  standalone: false,
 })
 export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = [];

src/app/examples/grid-infinite-json.component.ts

@@ -18,6 +18,7 @@ const FETCH_SIZE = 50;
 
 @Component({
   templateUrl: './grid-infinite-json.component.html',
+  standalone: false,
 })
 export class GridInfiniteJsonComponent implements OnInit {
   angularGrid!: AngularGridInstance;

src/app/examples/grid-infinite-odata.component.ts

@@ -22,6 +22,7 @@ const PERCENT_HTML_ESCAPED = '%25';
   styleUrls: ['./grid-infinite-odata.component.scss'],
   encapsulation: ViewEncapsulation.None,
   templateUrl: './grid-infinite-odata.component.html',
+  standalone: false,
 })
 export class GridInfiniteOdataComponent implements OnInit {
   angularGrid!: AngularGridInstance;

src/app/examples/grid-localization.component.ts

@@ -30,6 +30,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont
 
 @Component({
   templateUrl: './grid-localization.component.html',
+  standalone: false,
 })
 export class GridLocalizationComponent implements OnInit, OnDestroy {
   title = 'Example 12: Localization (i18n)';

src/app/examples/grid-menu.component.ts

@@ -16,6 +16,7 @@ import { Subscription } from 'rxjs';
   templateUrl: './grid-menu.component.html',
   styleUrls: ['./grid-menu.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridMenuComponent implements OnInit, OnDestroy {
   title = 'Example 9: Grid Menu Control';

src/app/examples/grid-odata.component.ts

@@ -20,6 +20,7 @@ const PERCENT_HTML_ESCAPED = '%25';
 
 @Component({
   templateUrl: './grid-odata.component.html',
+  standalone: false,
 })
 export class GridOdataComponent implements OnInit {
   title = 'Example 5: Grid connected to Backend Server with OData';

src/app/examples/grid-range.component.ts

@@ -37,6 +37,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont
 
 @Component({
   templateUrl: './grid-range.component.html',
+  standalone: false,
 })
 export class GridRangeComponent implements OnInit, OnDestroy {
   title = 'Example 25: Filtering from Range of Search Values';

src/app/examples/grid-resize-by-content.component.ts

@@ -69,6 +69,7 @@ const myCustomTitleValidator = (value: any) => {
   templateUrl: './grid-resize-by-content.component.html',
   styleUrls: ['./grid-resize-by-content.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: false,
 })
 export class GridResizeByContentComponent implements OnInit {
   title = 'Example 31: Columns Resize by Content';