update to angular v18

packages/altair-app/angular.json

@@ -123,7 +123,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"],
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "packageManager": "pnpm",
     "analytics": false
   }
 }

packages/altair-app/package.json

@@ -7,16 +7,16 @@
     "@altairgraphql/api-utils": "workspace:*",
     "@altairgraphql/db": "workspace:*",
     "@altairgraphql/electron-interop": "workspace:*",
-    "@angular/animations": "17.0.8",
+    "@angular/animations": "18.2.13",
     "@angular/cdk": "15.2.9",
-    "@angular/cli": "17.0.8",
-    "@angular/common": "17.0.8",
-    "@angular/core": "^17.0.8",
-    "@angular/forms": "17.0.8",
-    "@angular/platform-browser": "17.0.8",
-    "@angular/platform-browser-dynamic": "17.0.8",
-    "@angular/platform-server": "17.0.8",
-    "@angular/router": "17.0.8",
+    "@angular/cli": "18.2.12",
+    "@angular/common": "18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "18.2.13",
+    "@angular/platform-browser": "18.2.13",
+    "@angular/platform-browser-dynamic": "18.2.13",
+    "@angular/platform-server": "18.2.13",
+    "@angular/router": "18.2.13",
     "@apollo/client": "3.5.6",
     "@codemirror/autocomplete": "6.2.0",
     "@codemirror/commands": "6.3.3",
@@ -102,18 +102,18 @@
     "sval": "0.4.8",
     "tslib": "2.0.0",
     "uuid": "9.0.1",
-    "zone.js": "0.14.2"
+    "zone.js": "0.14.10"
   },
   "devDependencies": {
     "@altairgraphql/iframe-sandbox": "workspace:*",
-    "@angular-devkit/build-angular": "17.0.8",
+    "@angular-devkit/build-angular": "18.2.12",
     "@angular-eslint/builder": "17.1.1",
     "@angular-eslint/eslint-plugin": "17.1.1",
     "@angular-eslint/eslint-plugin-template": "17.1.1",
     "@angular-eslint/schematics": "17.1.1",
     "@angular-eslint/template-parser": "17.1.1",
-    "@angular/compiler": "17.0.8",
-    "@angular/compiler-cli": "17.0.8",
+    "@angular/compiler": "18.2.13",
+    "@angular/compiler-cli": "18.2.13",
     "@briebug/jest-schematic": "2.1.1",
     "@jest/globals": "28.1.3",
     "@ngrx/schematics": "12.4.0",
@@ -169,7 +169,7 @@
     "ts-jest": "29.0.5",
     "ts-mocks": "2.6.1",
     "ts-node": "9.1.1",
-    "typescript": "5.2.2"
+    "typescript": "5.5.4"
   },
   "homepage": "https://altair-graphql.github.io/altair/",
   "license": "MIT",

packages/altair-app/src/app/modules/altair/altair.module.ts

@@ -10,14 +10,15 @@
 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
-  HttpClientModule,
   HttpClient,
   HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
 } from '@angular/common/http';
 
 import { Store, StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { ToastrModule } from 'ngx-toastr';
 
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
@@ -118,16 +119,19 @@
     multi: true,
     useFactory: reducerBootstrapFactory,
   },
+  provideHttpClient(withInterceptorsFromDi()),
 ];
 
 @NgModule({
   declarations: [AltairComponent, WindowComponent],
+  bootstrap: [AltairComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  exports: [AltairComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
-    HttpClientModule,
     SharedModule.forRoot(),
     ComponentModule,
     DocViewerModule,
@@ -173,10 +177,7 @@
       resetTimeoutOnDuplicate: true,
     }),
   ],
-  providers: providers,
-  bootstrap: [AltairComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  exports: [AltairComponent],
+  providers,
 })
 export class AltairModule {
   constructor(

packages/altair-app/src/app/modules/altair/components/account-dialog/__snapshots__/account-dialog.component.spec.ts.snap

@@ -37,6 +37,7 @@ exports[`AccountDialogComponent should create 1`] = `
               <app-icon
                 name="info"
               >
+
                 <i-lucide
                   class="app-icon"
                 >
@@ -69,7 +70,6 @@ exports[`AccountDialogComponent should create 1`] = `
                   </svg>
                 </i-lucide>
 
-
               </app-icon>
             </a>
           </p>

packages/altair-app/src/app/modules/altair/components/plugin-manager/plugin-manager.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PluginManagerComponent } from './plugin-manager.component';
 import { SharedModule } from '../../modules/shared/shared.module';
 import { PluginRegistryService } from '../../services';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { of } from 'rxjs';
 
 let mockPluginRegistryService: PluginRegistryService;
@@ -18,16 +18,17 @@ describe('PluginManagerComponent', () => {
         getRemotePluginList: () => of({}),
       } as PluginRegistryService;
       TestBed.configureTestingModule({
-        providers: [
-          {
+    declarations: [PluginManagerComponent],
+    teardown: { destroyAfterEach: false },
+    imports: [SharedModule],
+    providers: [
+        {
             provide: PluginRegistryService,
             useFactory: () => mockPluginRegistryService,
-          },
-        ],
-        imports: [HttpClientModule, SharedModule],
-        declarations: [PluginManagerComponent],
-        teardown: { destroyAfterEach: false },
-      }).compileComponents();
+        },
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+}).compileComponents();
     })
   );
 

packages/altair-app/src/app/modules/altair/components/query-collections/__snapshots__/query-collections.component.spec.ts.snap

@@ -38,9 +38,9 @@ exports[`QueryCollectionsComponent should render passed collections correctly 1`
             nztrigger="click"
             type="button"
           >
-
 
 
+
 
 
           </button>

packages/altair-app/src/app/modules/altair/components/settings-dialog/settings-dialog.component.spec.ts

@@ -21,7 +21,7 @@ import {
 } from '@angular/platform-browser/animations';
 import { SharedModule } from '../../modules/shared/shared.module';
 import { SchemaFormModule } from '../schema-form/schema-form.module';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { MockProviders } from 'ng-mocks';
 
@@ -32,8 +32,8 @@ describe('SettingsDialogComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SettingsDialogComponent],
+      teardown: { destroyAfterEach: false },
       imports: [
-        HttpClientModule,
         NoopAnimationsModule,
         FormsModule,
         SharedModule,
@@ -61,8 +61,8 @@ describe('SettingsDialogComponent', () => {
           provide: AltairConfig,
           useValue: new AltairConfig(),
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
-      teardown: { destroyAfterEach: false },
     }).compileComponents();
   }));
 

packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap

@@ -276,15 +276,15 @@ exports[`UrlBoxComponent should render correctly with queryOperations > 1 1`] =
         nztrigger="click"
         track-id="send_request"
       >
+
+
         <span>
 
         </span>
 
 
 
 
-
-
         <app-icon
           name="chevron-down"
         />

packages/altair-app/src/app/modules/altair/services/electron-app/electron-app.service.spec.ts

@@ -5,14 +5,15 @@ import { Store, StoreModule } from '@ngrx/store';
 import { WindowService, DbService, NotifyService, StorageService } from '..';
 import { EMPTY } from 'rxjs';
 import { GqlService } from '../gql/gql.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { MockProvider } from 'ng-mocks';
 import { mock } from '../../../../../testing';
 
 describe('ElectronAppService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      teardown: { destroyAfterEach: false },
+      imports: [],
       providers: [
         ElectronAppService,
         MockProvider(WindowService),
@@ -36,8 +37,8 @@ describe('ElectronAppService', () => {
             dispatch: () => {},
           },
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
-      teardown: { destroyAfterEach: false },
     });
   });
 

packages/altair-app/src/app/modules/altair/services/keybinder/keybinder.service.spec.ts

@@ -2,19 +2,20 @@ import { TestBed, inject } from '@angular/core/testing';
 
 import { KeybinderService } from './keybinder.service';
 import { Store } from '@ngrx/store';
-import { empty as observableEmpty } from 'rxjs';
+import { EMPTY } from 'rxjs';
 import { WindowService } from '../window.service';
 import { DbService } from '../db.service';
 import { ElectronAppService } from '../electron-app/electron-app.service';
 import { NotifyService } from '../notify/notify.service';
 import { GqlService } from '../gql/gql.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { MockProvider } from 'ng-mocks';
 
 describe('KeybinderService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      teardown: { destroyAfterEach: false },
+      imports: [],
       providers: [
         KeybinderService,
         MockProvider(WindowService),
@@ -27,19 +28,16 @@ describe('KeybinderService', () => {
           useValue: {
             subscribe: () => {},
             select: () => [],
-            map: () => observableEmpty(),
+            map: () => EMPTY,
             dispatch: () => {},
           },
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
-      teardown: { destroyAfterEach: false },
     });
   });
 
-  it('should be created', inject(
-    [KeybinderService],
-    (service: KeybinderService) => {
-      expect(service).toBeTruthy();
-    }
-  ));
+  it('should be created', inject([KeybinderService], (service: KeybinderService) => {
+    expect(service).toBeTruthy();
+  }));
 });

packages/altair-app/src/app/modules/altair/services/pre-request/pre-request.service.spec.ts

@@ -2,7 +2,7 @@ import { TestBed, inject } from '@angular/core/testing';
 
 import { PreRequestService } from './pre-request.service';
 import { CookieService } from 'ngx-cookie-service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NotifyService } from '../notify/notify.service';
 import { Store } from '@ngrx/store';
 import { anyFn, mock, mockStoreFactory } from '../../../../../testing';
@@ -16,7 +16,8 @@ const mockNotifyService = mock({
 describe('PreRequestService', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      teardown: { destroyAfterEach: false },
+      imports: [],
       providers: [
         CookieService,
         PreRequestService,
@@ -34,8 +35,8 @@ describe('PreRequestService', () => {
               },
             }),
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
-      teardown: { destroyAfterEach: false },
     })
   );
 

packages/altair-app/src/app/modules/altair/services/window.service.spec.ts

@@ -7,7 +7,7 @@ import { Store, provideStore } from '@ngrx/store';
 import * as services from '../services';
 import { WindowService } from './window.service';
 import { GqlService } from './gql/gql.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NotifyService } from './notify/notify.service';
 import { MockProvider } from 'ng-mocks';
 import { QueryCollectionService } from './query-collection/query-collection.service';
@@ -18,7 +18,8 @@ import { ExportWindowState } from 'altair-graphql-core/build/types/state/window.
 describe('WindowService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      teardown: { destroyAfterEach: false },
+      imports: [],
       providers: [
         WindowService,
         GqlService,
@@ -27,9 +28,8 @@ describe('WindowService', () => {
         MockProvider(services.ElectronAppService),
         services.DbService,
         provideStore(getReducer(), {}),
-        // provideMockStore<RootState>({}),
+        provideHttpClient(withInterceptorsFromDi()),
       ],
-      teardown: { destroyAfterEach: false },
     });
   });