PoC: Upgrade to Angular 18

.eslintrc.json

@@ -13,34 +13,39 @@
         "./tools/eslint-plugins/legacy-ng-cli-compat",
         "./tools/eslint-plugins/legacy-ng-cli-compat--formatting-add-on"
       ],
-      "plugins": ["deprecation", "@typescript-eslint", "@nx"],
+      "plugins": ["deprecation", "@typescript-eslint", "@nx", "@stylistic/ts"],
       "rules": {
         "@angular-eslint/no-host-metadata-property": "off",
-        "@typescript-eslint/no-empty-interface": "off",
         "deprecation/deprecation": "warn",
         "prefer-arrow/prefer-arrow-functions": "off",
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/naming-convention": "off",
         "space-before-function-paren": "off",
         "@angular-eslint/no-input-rename": "off",
         "curly": "off",
         "no-var": "off",
-        "@typescript-eslint/ban-types": "off",
         "jsdoc/newline-after-description": "off",
         "no-shadow": "off",
-        "@typescript-eslint/no-shadow": "off",
-        "@typescript-eslint/no-unused-expressions": "off",
-        "@typescript-eslint/member-ordering": "off",
         "arrow-body-style": "off",
         "object-shorthand": "off",
-        "@typescript-eslint/prefer-for-of": "off",
         "jsdoc/no-types": "off",
         "no-fallthrough": "off",
         "prefer-const": "off",
-        "@typescript-eslint/no-namespace": "off",
-        "@typescript-eslint/consistent-type-assertions": "off",
         "@angular-eslint/use-lifecycle-interface": "error",
-        "@typescript-eslint/quotes": "off",
+        "@stylistic/ts/quotes": "off",
+        "@stylistic/ts/member-delimiter-style": [
+          "error",
+          {
+            "multiline": {
+              "delimiter": "semi",
+              "requireLast": true
+            },
+            "singleline": {
+              "delimiter": "semi",
+              "requireLast": false
+            }
+          }
+        ],
+        "@stylistic/ts/semi": ["error", "always"],
+        "@stylistic/ts/type-annotation-spacing": "error",
         "@angular-eslint/component-selector": [
           "error",
           {
@@ -58,7 +63,6 @@
           }
         ],
         "@typescript-eslint/consistent-type-definitions": "off",
-        "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/explicit-member-accessibility": [
           "off",
           {

.gitignore

@@ -71,4 +71,5 @@ Thumbs.db
 **/git-ignore
 
 .nx/cache
+.nx/workspace-data
 

.prettierignore

@@ -4,4 +4,5 @@ feature-libs/smartedit/assets/webApplicationInjector.js
 **/*.yml
 coverage
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

core-libs/setup/package.json

@@ -19,15 +19,15 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/core": "^17.0.5",
-    "@angular/ssr": "^17.0.5",
+    "@angular/core": "18.2.7",
+    "@angular/ssr": "18.2.7",
     "@spartacus/cart": "2211.29.0",
     "@spartacus/core": "2211.29.0",
     "@spartacus/order": "2211.29.0",
     "@spartacus/user": "2211.29.0"
   },
   "optionalDependencies": {
-    "@angular/platform-server": "^17.0.5",
+    "@angular/platform-server": "18.2.7",
     "express": "^4.21.0"
   },
   "publishConfig": {

feature-libs/asm/customer-360/occ/adapters/occ-asm-customer-360.adapter.spec.ts

@@ -1,6 +1,6 @@
 import {
-  HttpClientTestingModule,
   HttpTestingController,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import {
@@ -17,6 +17,10 @@ import {
 } from '@spartacus/core';
 import { Observable, of } from 'rxjs';
 import { OccAsmCustomer360Adapter } from './occ-asm-customer-360.adapter';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 
 const baseSite = 'test-site';
 class MockBaseSiteService {
@@ -43,11 +47,13 @@ describe('OccAsmCustomer360Adapter', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         OccAsmCustomer360Adapter,
         { provide: BaseSiteService, useClass: MockBaseSiteService },
         { provide: OccEndpointsService, useClass: MockOccEndpointsService },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
 

feature-libs/asm/customer-360/root/interceptors/site-context.interceptor.spec.ts

@@ -1,8 +1,13 @@
-import { HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 import {
-  HttpClientTestingModule,
+  HttpClient,
+  HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
   HttpTestingController,
   TestRequest,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 import {
@@ -63,7 +68,7 @@ describe('SiteContextInterceptor', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         {
           provide: LanguageService,
@@ -86,6 +91,8 @@ describe('SiteContextInterceptor', () => {
           useClass: SiteContextInterceptor,
           multi: true,
         },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
     httpMock = TestBed.inject(HttpTestingController);

feature-libs/asm/occ/adapters/occ-asm.adapter.spec.ts

@@ -1,7 +1,7 @@
 import {
-  HttpClientTestingModule,
   HttpTestingController,
   TestRequest,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import {
@@ -25,6 +25,10 @@ import {
 } from '@spartacus/core';
 import { Observable, of } from 'rxjs';
 import { OccAsmAdapter } from './occ-asm.adapter';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 
 const MockAsmConfig: AsmConfig = {};
 
@@ -84,12 +88,14 @@ describe('OccAsmAdapter', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         OccAsmAdapter,
         { provide: BaseSiteService, useClass: MockBaseSiteService },
         { provide: AsmConfig, useValue: MockAsmConfig },
         { provide: OccEndpointsService, useClass: MockOccEndpointsService },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
 

feature-libs/asm/package.json

@@ -25,13 +25,13 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular-devkit/schematics": "^17.0.5",
-    "@angular/common": "^17.0.5",
-    "@angular/core": "^17.0.5",
-    "@angular/forms": "^17.0.5",
-    "@ng-select/ng-select": "^12.0.4",
-    "@ngrx/effects": "^17.0.1",
-    "@ngrx/store": "^17.0.1",
+    "@angular-devkit/schematics": "18.2.7",
+    "@angular/common": "18.2.7",
+    "@angular/core": "18.2.7",
+    "@angular/forms": "18.2.7",
+    "@ng-select/ng-select": "13.9.0",
+    "@ngrx/effects": "18.1.0",
+    "@ngrx/store": "18.1.0",
     "@spartacus/cart": "2211.29.0",
     "@spartacus/core": "2211.29.0",
     "@spartacus/order": "2211.29.0",

feature-libs/asm/root/interceptors/user-id-http-header.interceptor.spec.ts

@@ -2,10 +2,12 @@ import {
   HttpClient,
   HttpContext,
   HTTP_INTERCEPTORS,
+  provideHttpClient,
+  withInterceptorsFromDi,
 } from '@angular/common/http';
 import {
-  HttpClientTestingModule,
   HttpTestingController,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import {
@@ -33,7 +35,7 @@ describe('UserIdHttpHeaderInterceptor', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         { provide: OCC_USER_ID_CONSTANTS, useValue: [] },
         { provide: UserIdService, useClass: MockUserIdService },
@@ -49,6 +51,8 @@ describe('UserIdHttpHeaderInterceptor', () => {
             },
           },
         }),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
   });
@@ -185,7 +189,7 @@ describe('UserIdHttpHeaderInterceptor', () => {
 
   it('should pass the original request if the interceptor is not feature-enabled', (done) => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         { provide: OCC_USER_ID_CONSTANTS, useValue: [] },
         { provide: UserIdService, useClass: MockUserIdService },
@@ -201,6 +205,8 @@ describe('UserIdHttpHeaderInterceptor', () => {
             },
           },
         }),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
 

feature-libs/asm/root/services/asm-auth-http-header.service.spec.ts

@@ -1,5 +1,10 @@
-import { HttpHeaders, HttpRequest } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import {
+  HttpHeaders,
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import {
   AuthRedirectService,
@@ -71,7 +76,7 @@ describe('AsmAuthHttpHeaderService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         AsmAuthHttpHeaderService,
         { provide: CsAgentAuthService, useClass: MockCsAgentAuthService },
@@ -85,6 +90,8 @@ describe('AsmAuthHttpHeaderService', () => {
         { provide: OccEndpointsService, useClass: MockOccEndpointsService },
         { provide: AuthStorageService, useClass: MockAuthStorageService },
         { provide: AuthRedirectService, useClass: MockAuthRedirectService },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
 

feature-libs/asm/tsconfig.schematics.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "module": "CommonJs",
-    "types": ["jest"],
+    "types": ["node", "jest"],
     "paths": {
       "@spartacus/schematics": ["../../projects/schematics/index"],
       "@spartacus/setup": ["../../core-libs/setup/public_api"],

feature-libs/cart/base/core/guards/cart-validation.guard.ts

@@ -5,7 +5,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Router, UrlTree } from '@angular/router';
+import { GuardResult, Router } from '@angular/router';
 import {
   ActiveCartFacade,
   CartValidationFacade,
@@ -37,7 +37,7 @@ export class CartValidationGuard {
 
   protected GLOBAL_MESSAGE_TIMEOUT = 10000;
 
-  canActivate(): Observable<boolean | UrlTree> {
+  canActivate(): Observable<GuardResult> {
     return !this.cartConfigService.isCartValidationEnabled()
       ? of(true)
       : this.cartValidationService.validateCart().pipe(

feature-libs/cart/base/core/store/effects/cart-entry.effect.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action } from '@ngrx/store';
@@ -9,6 +9,10 @@ import { Observable, of } from 'rxjs';
 import { CartEntryConnector } from '../../connectors/entry/cart-entry.connector';
 import { CartActions } from '../actions/index';
 import * as fromEffects from './cart-entry.effect';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import createSpy = jasmine.createSpy;
 
 const MockOccModuleConfig: OccConfig = {
@@ -45,12 +49,14 @@ describe('Cart effect', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         { provide: CartEntryConnector, useValue: mockCartEntryConnector },
         fromEffects.CartEntryEffects,
         { provide: OccConfig, useValue: MockOccModuleConfig },
         provideMockActions(() => actions$),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });
 

feature-libs/cart/base/core/store/effects/cart-voucher.effect.spec.ts

@@ -1,5 +1,9 @@
-import { HttpErrorResponse } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import {
+  HttpErrorResponse,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import {
@@ -48,14 +52,16 @@ describe('Cart Voucher effect', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [],
       providers: [
         { provide: CartVoucherAdapter, useValue: {} },
         fromEffects.CartVoucherEffects,
         { provide: OccConfig, useValue: MockOccModuleConfig },
         { provide: GlobalMessageService, useClass: MockGlobalMessageService },
         { provide: LoggerService, useClass: MockLoggerService },
         provideMockActions(() => actions$),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
     });