Upgrade to angular 19 (#244)

* Upgrade dependencies

* ng update @angular/core@19 @angular/cli@19

* ng update @angular/material@19

* Fix updates to provideAppInitializer

* Fix component overlay directive + lint errors

package.json

@@ -32,40 +32,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.10",
-    "@angular/cdk": "^18.2.11",
-    "@angular/common": "^18.2.10",
-    "@angular/compiler": "^18.2.10",
-    "@angular/core": "^18.2.10",
-    "@angular/forms": "^18.2.10",
-    "@angular/material": "^18.2.11",
-    "@angular/platform-browser": "^18.2.10",
-    "@angular/platform-browser-dynamic": "^18.2.10",
-    "@angular/router": "^18.2.10",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "ace-builds": "1.36.4",
-    "ag-grid-angular": "32.3.2",
-    "ag-grid-community": "32.3.2",
-    "ag-grid-enterprise": "32.3.2",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "ace-builds": "1.36.5",
+    "ag-grid-angular": "32.3.3",
+    "ag-grid-community": "32.3.3",
+    "ag-grid-enterprise": "32.3.3",
     "immutability-helper": "^3.1.1",
     "luxon": "^3.5.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.11",
-    "@angular-eslint/builder": "^18.4.0",
-    "@angular-eslint/eslint-plugin": "^18.4.0",
-    "@angular-eslint/eslint-plugin-template": "^18.4.0",
-    "@angular-eslint/schematics": "^18.4.0",
-    "@angular-eslint/template-parser": "^18.4.0",
-    "@angular/cli": "^18.2.11",
-    "@angular/compiler-cli": "^18.2.10",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-eslint/builder": "^18.4.2",
+    "@angular-eslint/eslint-plugin": "^18.4.2",
+    "@angular-eslint/eslint-plugin-template": "^18.4.2",
+    "@angular-eslint/schematics": "^18.4.2",
+    "@angular-eslint/template-parser": "^18.4.2",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "5.1.4",
     "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
@@ -79,9 +79,9 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-junit-reporter": "^2.0.1",
     "multiple-cucumber-html-reporter": "^3.8.0",
-    "ng-packagr": "^18.2.1",
+    "ng-packagr": "^19.0.1",
     "prettier": "^3.3.3",
     "prettier-eslint": "^16.3.0",
-    "typescript": "~5.5.4"
+    "typescript": "~5.6.3"
   }
 }

projects/ngssm-ace-editor/src/lib/ngssm-ace-editor/ngssm-ace-editor.component.ts

@@ -10,7 +10,6 @@ import { NgssmAceEditorMode } from '../ngssm-ace-editor-mode';
 
 @Component({
   selector: 'ngssm-ace-editor',
-  standalone: true,
   imports: [CommonModule, NgssmComponentOverlayDirective],
   templateUrl: './ngssm-ace-editor.component.html',
   styleUrls: ['./ngssm-ace-editor.component.scss']

projects/ngssm-ag-grid/src/lib/components/ngssm-actions-cell-renderer/ngssm-actions-cell-renderer.component.ts

@@ -26,7 +26,6 @@ interface ActionButton {
 
 @Component({
   selector: 'ngssm-actions-cell-renderer',
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule],
   templateUrl: './ngssm-actions-cell-renderer.component.html',
   styleUrls: ['./ngssm-actions-cell-renderer.component.scss'],

projects/ngssm-ag-grid/src/lib/components/ngssm-ag-grid-theme.directive.spec.ts

@@ -8,7 +8,6 @@ import { AgGridModule } from 'ag-grid-angular';
 import { NgssmAgGridThemeDirective } from './ngssm-ag-grid-theme.directive';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, AgGridModule, NgssmAgGridThemeDirective],
   template: ` <ag-grid-angular ngssmAgGridTheme> </ag-grid-angular> `,
   styles: [

projects/ngssm-ag-grid/src/lib/components/ngssm-ag-grid.directive.spec.ts

@@ -36,7 +36,8 @@ interface Item {
         height: 100%;
       }
     `
-  ]
+  ],
+  standalone: false
 })
 class TestingComponent {
   public readonly gridOptions: GridOptions = {
@@ -98,7 +99,8 @@ class TestingComponent {
         height: 100%;
       }
     `
-  ]
+  ],
+  standalone: false
 })
 class TestingWithConfigComponent {
   public readonly gridOptions: GridOptions = {

projects/ngssm-data/src/lib/ngssm-data/components/ngssm-auto-reload/ngssm-auto-reload.component.ts

@@ -10,7 +10,6 @@ import { getNgssmDataSourceValueAutoReloadTypes, NgssmDataSourceValueAutoReloadT
 
 @Component({
   selector: 'ngssm-auto-reload',
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule],
   templateUrl: './ngssm-auto-reload.component.html',
   styleUrls: [],

projects/ngssm-data/src/lib/ngssm-data/components/ngssm-data-reload-button/ngssm-data-reload-button.component.ts

@@ -17,7 +17,6 @@ import { NgssmAutoReloadComponent } from '../ngssm-auto-reload/ngssm-auto-reload
 
 @Component({
   selector: 'ngssm-data-reload-button',
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatTooltipModule, MatIconModule, MatProgressSpinnerModule, NgssmAutoReloadComponent],
   templateUrl: './ngssm-data-reload-button.component.html',
   styleUrls: [],

projects/ngssm-data/src/lib/ngssm-data/provide-ngssm-data.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, EnvironmentProviders, Inject, Injectable, Optional, makeEnvironmentProviders } from '@angular/core';
+import { EnvironmentProviders, Inject, Injectable, Optional, makeEnvironmentProviders, inject, provideAppInitializer } from '@angular/core';
 
 import { Store, provideEffects, provideReducers } from 'ngssm-store';
 
@@ -14,23 +14,18 @@ export class NgssmDataSourceCollection {
   constructor(@Inject(NGSSM_DATA_SOURCE) @Optional() public dataSources: NgssmDataSource[]) {}
 }
 
-const initDataSourceValues = (store: Store, dataSourceCollection: NgssmDataSourceCollection): (() => void) => {
-  return () => {
-    const dataSources = dataSourceCollection.dataSources ?? [];
-    if (dataSources.length > 0) {
-      store.dispatchAction(new NgssmRegisterDataSourcesAction(dataSources));
-    }
-  };
+const initDataSourceValues = () => {
+  const store = inject(Store);
+  const dataSourceCollection = inject(NgssmDataSourceCollection);
+  const dataSources = dataSourceCollection.dataSources ?? [];
+  if (dataSources.length > 0) {
+    store.dispatchAction(new NgssmRegisterDataSourcesAction(dataSources));
+  }
 };
 
 export const provideNgssmData = (): EnvironmentProviders => {
   return makeEnvironmentProviders([
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initDataSourceValues,
-      deps: [Store, NgssmDataSourceCollection],
-      multi: true
-    },
+    provideAppInitializer(initDataSourceValues),
     provideReducers(DataSourcesRegistrationReducer, DataSourceValueReducer),
     provideEffects(DataLoadingEffect)
   ]);

projects/ngssm-navigation/src/lib/provide-ngssm-navigation.ts

@@ -1,27 +1,17 @@
-import { APP_INITIALIZER, EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { EnvironmentProviders, makeEnvironmentProviders, inject, provideAppInitializer } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { provideReducer } from 'ngssm-store';
 
 import { isNavigationUnLocked } from './guards';
 import { NavigationReducer } from './reducers/navigation.reducer';
 
-function initializeNavigation(router: Router): () => void {
-  return () => {
-    router.config.forEach((route) => {
-      route.canDeactivate = [() => isNavigationUnLocked(), ...(route.canDeactivate ?? [])];
-    });
-  };
-}
+const initializeNavigation = () => {
+  inject(Router).config.forEach((route) => {
+    route.canDeactivate = [() => isNavigationUnLocked(), ...(route.canDeactivate ?? [])];
+  });
+};
 
 export const provideNgssmNavigation = (): EnvironmentProviders => {
-  return makeEnvironmentProviders([
-    provideReducer(NavigationReducer),
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initializeNavigation,
-      deps: [Router],
-      multi: true
-    }
-  ]);
+  return makeEnvironmentProviders([provideReducer(NavigationReducer), provideAppInitializer(initializeNavigation)]);
 };

projects/ngssm-remote-data/service-info/src/model/service-info.ts

@@ -14,9 +14,9 @@ export const serviceInfoLoader: RemoteDataLoadingFunc<ServiceInfo, any> = () =>
   return inject(HttpClient).get<ServiceInfo>(serviceUrl);
 };
 
-export const serviceInfoInitializerFactory = (store: Store): (() => Promise<boolean>) => {
+export const serviceInfoInitializerFactory = (): (() => Promise<boolean>) => {
   return async () => {
-    store.dispatchAction(new LoadRemoteDataAction(serviceInfoKey, { forceReload: true }));
+    inject(Store).dispatchAction(new LoadRemoteDataAction(serviceInfoKey, { forceReload: true }));
     return true;
   };
 };

projects/ngssm-remote-data/service-info/src/provide-ngssm-service-info.ts

@@ -1,19 +1,13 @@
-import { APP_INITIALIZER, EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { EnvironmentProviders, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
 
 import { provideRemoteDataFunc } from 'ngssm-remote-data';
-import { Store } from 'ngssm-store';
 
 import { NGSSM_SERVICE_INFO_URL, serviceInfoInitializerFactory, serviceInfoKey, serviceInfoLoader } from './model';
 
 export const provideNgssmServiceInfo = (infoUrl = '../info'): EnvironmentProviders => {
   return makeEnvironmentProviders([
     { provide: NGSSM_SERVICE_INFO_URL, useValue: infoUrl },
     provideRemoteDataFunc(serviceInfoKey, serviceInfoLoader),
-    {
-      provide: APP_INITIALIZER,
-      useFactory: serviceInfoInitializerFactory,
-      deps: [Store],
-      multi: true
-    }
+    provideAppInitializer(serviceInfoInitializerFactory())
   ]);
 };

projects/ngssm-remote-data/src/lib/ngssm-remote-call/components/ngssm-remote-call-error/ngssm-remote-call-error.component.ts

@@ -11,7 +11,6 @@ import { RemoteCallStatus } from '../../model';
 
 @Component({
   selector: 'ngssm-remote-call-error',
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatIconModule],
   templateUrl: './ngssm-remote-call-error.component.html',
   styleUrls: [],

projects/ngssm-remote-data/src/lib/ngssm-remote-call/components/ngssm-remote-call.directive.spec.ts

@@ -10,7 +10,6 @@ import { NgssmRemoteCallStateSpecification } from '../state';
 import { NgssmRemoteCallDirective } from './ngssm-remote-call.directive';
 
 @Component({
-  standalone: true,
   template: ` <div [ngssmRemoteCall]="'demo'">custom content</div> `,
   imports: [CommonModule, NgssmRemoteCallDirective]
 })

projects/ngssm-remote-data/src/lib/ngssm-remote-call/components/ngssm-remote-call.directive.ts

@@ -2,15 +2,15 @@ import { Directive, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { NgSsmComponent, Store } from 'ngssm-store';
-import { NgssmOverlayBuilder } from 'ngssm-toolkit';
+import { NgssmOverlay, NgssmOverlayBuilder } from 'ngssm-toolkit';
 
 import { RemoteCallStatus } from '../model';
 import { selectRemoteCall } from '../state';
 
 @Directive({
   selector: '[ngssmRemoteCall]',
   standalone: true,
-  providers: [NgssmOverlayBuilder]
+  providers: [NgssmOverlayBuilder, NgssmOverlay]
 })
 export class NgssmRemoteCallDirective extends NgSsmComponent {
   private subscription: Subscription | undefined;

projects/ngssm-remote-data/src/lib/remote-data/components/ngssm-caches-display-button/ngssm-caches-display-button.component.ts

@@ -10,7 +10,6 @@ import { RemoteDataActionType } from '../../actions';
 
 @Component({
   selector: 'ngssm-caches-display-button',
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule],
   templateUrl: './ngssm-caches-display-button.component.html',
   styleUrls: ['./ngssm-caches-display-button.component.scss'],

projects/ngssm-remote-data/src/lib/remote-data/components/ngssm-caches/ngssm-caches.component.ts

@@ -20,7 +20,6 @@ interface Cache {
 
 @Component({
   selector: 'ngssm-caches',
-  standalone: true,
   imports: [CommonModule, MatDialogModule, MatButtonModule, MatTableModule, MatIconModule, MatProgressSpinnerModule],
   templateUrl: './ngssm-caches.component.html',
   styleUrls: ['./ngssm-caches.component.scss'],

projects/ngssm-remote-data/src/lib/remote-data/components/ngssm-remote-data-overlay.directive.spec.ts

@@ -10,7 +10,6 @@ import { RemoteDataStateSpecification } from '../state';
 import { NgssmRemoteDataOverlayDirective } from './ngssm-remote-data-overlay.directive';
 
 @Component({
-  standalone: true,
   template: ` <div [ngssmRemoteDataOverlay]="['key1', 'key2']">custom content</div> `,
   imports: [CommonModule, NgssmRemoteDataOverlayDirective]
 })

projects/ngssm-remote-data/src/lib/remote-data/components/ngssm-remote-data-overlay.directive.ts

@@ -2,15 +2,15 @@ import { Directive, Input } from '@angular/core';
 import { combineLatest, Subscription } from 'rxjs';
 
 import { NgSsmComponent, Store } from 'ngssm-store';
-import { NgssmOverlayBuilder } from 'ngssm-toolkit';
+import { NgssmOverlay, NgssmOverlayBuilder } from 'ngssm-toolkit';
 
 import { DataStatus } from '../model';
 import { selectRemoteData } from '../state';
 
 @Directive({
   selector: '[ngssmRemoteDataOverlay]',
   standalone: true,
-  providers: [NgssmOverlayBuilder]
+  providers: [NgssmOverlayBuilder, NgssmOverlay]
 })
 export class NgssmRemoteDataOverlayDirective extends NgSsmComponent {
   private subscription: Subscription | undefined;

projects/ngssm-remote-data/src/lib/remote-data/components/ngssm-remote-data-reload-button/ngssm-remote-data-reload-button.component.ts

@@ -16,7 +16,6 @@ const datePipe = new DatePipe('en-US');
 
 @Component({
   selector: 'ngssm-remote-data-reload-button',
-  standalone: true,
   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, MatProgressSpinnerModule],
   templateUrl: './ngssm-remote-data-reload-button.component.html',
   styleUrls: ['./ngssm-remote-data-reload-button.component.scss'],

projects/ngssm-shell/src/lib/components/shell-notification-popup/shell-notification-popup.component.ts

@@ -9,7 +9,6 @@ import { ShellNotificationComponent } from '../shell-notification/shell-notifica
 
 @Component({
   selector: 'ngssm-shell-notification-popup',
-  standalone: true,
   imports: [CommonModule, ShellNotificationComponent],
   templateUrl: './shell-notification-popup.component.html',
   styleUrls: ['./shell-notification-popup.component.scss'],

projects/ngssm-shell/src/lib/components/shell-notification/shell-notification.component.ts

@@ -13,7 +13,6 @@ import { DisplayNotificationDetailsAction } from '../../actions';
 
 @Component({
   selector: 'ngssm-shell-notification',
-  standalone: true,
   imports: [CommonModule, MatCardModule, MatIconModule, MatButtonModule],
   templateUrl: './shell-notification.component.html',
   styleUrls: ['./shell-notification.component.scss'],

projects/ngssm-shell/src/lib/components/shell-notifications/shell-notifications.component.ts

@@ -15,7 +15,6 @@ import { ShellNotificationComponent } from '../shell-notification/shell-notifica
 
 @Component({
   selector: 'ngssm-shell-notifications',
-  standalone: true,
   imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, NgssmAceEditorComponent, ShellNotificationComponent],
   templateUrl: './shell-notifications.component.html',
   styleUrls: ['./shell-notifications.component.scss'],

projects/ngssm-shell/src/lib/components/shell/shell.component.ts

@@ -19,7 +19,6 @@ import { WrapperComponent } from '../wrapper/wrapper.component';
 
 @Component({
   selector: 'ngssm-shell',
-  standalone: true,
   imports: [
     CommonModule,
     RouterModule,

projects/ngssm-shell/src/lib/components/side-nav/side-nav.component.ts

@@ -11,7 +11,6 @@ import { WrapperComponent } from '../wrapper/wrapper.component';
 
 @Component({
   selector: 'ngssm-side-nav',
-  standalone: true,
   imports: [CommonModule, MatDividerModule, RouterModule, WrapperComponent],
   templateUrl: './side-nav.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush