Upgrade to Angular 18 (#19614)

Nx migration:
- "@angular-eslint/eslint-plugin" bumped to 18.4.2,
- "@angular-eslint/eslint-plugin-template" bumped to 18.4.2,
- "@angular-eslint/template-parser" bumped to 18.4.2,
- "@nx/angular" bumped to 20.1.3
- "@nx/devkit" bumped to 20.1.3
- "@nx/eslint-plugin" bumped to 20.1.3
- "@nx/jest" bumped to 20.1.3
- "@nx/workspace" bumped to 20.1.3
- "@types/jest" bumped to 29.5.14
- "jest" bumped to 29.7.0
- "jest-preset-angular" bumped to 14.1.1
- "nx" bumped to 20.1.3,
- "useInferencePlugins": false added to nx.json
  for more, see: https://nx.dev/concepts/inferred-tasks#existing-nx-workspaces
- "useLegacyCache": true added to nx.json
  for more, see: https://nx.dev/nx-api/devkit/documents/Workspace#uselegacycach
- /.nx/workspace-data added to .gitignore and .prettierignore
Angular migration:
- "@angular/.." libraries bumped from 17.0.5 to 18.2.9
- "@angular-devkit/.." libraries bumped from 17.0.5 to 18.2.9
- "@angular-eslint/.." libraries bumped from 17.1.0 to 18.4.2
- "@typescript-eslint/" libraries bumped from 6.13.1 to 7.2.0
- "@schematics/angular" bumped from 17.0.5 to 18.2.9
- "@ng-select/ng-select" bumped from 12.0.4 to 13.9.0
- "ngx-infinite-scroll" bumped from 17.0.0 to 18.0.0
- "zone.js" bumped from 0.14.2 to 0.14.10
- "@angular-builders/custom-webpack" bumped from 15.0.0 to 18.0.0
- "ng-packagr" bumped from 17.0.2 to 18.2.1
- replaced deprecated HTTP related modules with provider functions
- fixed issues after replacement in some tests (redundant code) (?)
- adjusted 'form-errors.component.ts' to new 'AbstractControl' shape
- set 'MessageService' as optional in form.component.ts and remove it from FormModule providers' array
- replaced boolean | UrlTree return type with GuardResult for canActivate guard functions and related code with
NgRx:
- "@ngrx/effects" bumped from 17.0.1 to 18.1.0
- "@ngrx/router-store" bumped from 17.0.1 to 18.1.0
- "@ngrx/store" bumped from 17.0.1 to 18.1.0
- "@ngrx/store-devtools" bumped from 17.0.1 to 18.1.0
- "@ngrx/operators" introduced
- TypedAction removed in favour of Action
Build issues:
- replaced Observable<boolean | UrlTree> with combined Observable<GuardResult> from @angular/router
  for more, see: feat(router): Add ability to return UrlTree with NavigationBehaviorOptions from guards angular/angular#45023
- add node to "types" in all tsconfig.schematics.json to support node API
- remove redundant dist and assets property from nested ng-package.json in CDP, OPF and OMF
for more, see: https://github.com/ng-packagr/ng-packagr/pull/2754/files
- Unit tests:
- add support for RedirectCommand type in guard tests
- adjust order-return-requrest-list.component.spec.ts to look for input[aria-controls="order-return-table"] instead of div[aria-controls="order-return-table"] due to changes in ng-select
  for more, see: fix(wcag): adds role 'combobox' to input ng-select/ng-select#2428
- remove recommended property from eslint rules
- add fix-jsdom-environment.ts containing fix for missing support of structuredClone in jest-environment-jsdom
  for more, see: [Bug]: structuredClone is not defined jsdom/jsdom#3363 (comment)
- convertAnnotatedSourceToFailureCase is now imported from @angular-eslint/test-utils(new dependency) instead from @angular-eslint/utils
- include TS files in tsconfig.spec.json
- replace/remove redundant RouterTestingModule
- update snapshots in schematics tests
Linting:
- added new @stylistic/eslint-plugin-ts due to moving some there som config from @typescript-eslint/eslint-plugin:
  - quotes
  - member-delimiter-style
  - semi
  - type-annotation-spacing`
  for more, see e.g.: https://typescript-eslint.io/rules/member-delimiter-style/
- removed redundant rules from legacy-ng-cli-compat files
Schematics:
- fixed type in file-utils_spec.ts
- update dependencies.json
- adjusted schema.json to work with new Angular
  for more, see: fix(@angular/cli): support default options for multiselect list x-prompt angular/angular-cli#28842
- Linter for styles:
- fixed issues caught after bumping minor version of "stylelint" packages (when upgrading package-lock.json)
- added "integration-libs" to the linter scope

.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.9",
+    "@angular/ssr": "^18.2.9",
     "@spartacus/cart": "2211.32.0-1",
     "@spartacus/core": "2211.32.0-1",
     "@spartacus/order": "2211.32.0-1",
     "@spartacus/user": "2211.32.0-1"
   },
   "optionalDependencies": {
-    "@angular/platform-server": "^17.0.5",
+    "@angular/platform-server": "^18.2.9",
     "express": "^4.21.2"
   },
   "publishConfig": {

core-libs/setup/ssr/engine/__snapshots__/cx-common-engine.spec.ts.snap

@@ -7,6 +7,6 @@ exports[`CxCommonEngine should handle APP_INITIALIZER errors the standard Angula
 
 exports[`CxCommonEngine should handle errors propagated from SSR 1`] = `"test error"`;
 
-exports[`CxCommonEngine should not override providers passed to options 1`] = `"<html data-critters-container><head></head><body><cx-token ng-version="17.0.5" ng-server-context="ssr">message:test</cx-token></body></html>"`;
+exports[`CxCommonEngine should not override providers passed to options 1`] = `"<html data-critters-container><head></head><body><cx-token ng-version="18.2.9" ng-server-context="ssr">message:test</cx-token></body></html>"`;
 
-exports[`CxCommonEngine should return html if no errors 1`] = `"<html data-critters-container><head></head><body><cx-mock ng-version="17.0.5" ng-server-context="ssr">some template</cx-mock></body></html>"`;
+exports[`CxCommonEngine should return html if no errors 1`] = `"<html data-critters-container><head></head><body><cx-mock ng-version="18.2.9" ng-server-context="ssr">some template</cx-mock></body></html>"`;

docs/migration/2211_ng18/migration.md

@@ -0,0 +1,38 @@
+# (EARLY NOTES) Migrating a custom app to use Spartacus with Angular v18
+
+Before upgrading Spartacus to the new version with Angular 18, you need to first:
+- upgrade to the latest 2211.x of Spartacus
+- upgrade Angular to version v18
+
+## Update Angular to 17 and 18
+
+### Update Angular to 17 and 3rd party deps to be compatible with Angular 18
+
+Follow the [Angular guidelines for upgrading from v17 to v18](https://angular.dev/update-guide?v=17.0-18.0&l=3) and bump the Angular version locally, and update other 3rd party dependencies from Angular ecosystem  to versions compatible with Angular 18 (e.g. `@ng-select/ng-select@13`, `@ngrx/store@18`, `ngx-infinite-scroll@18`):
+
+```bash
+ng update @angular/core@18 @angular/cli@18 @ng-select/ng-select@13 @ngrx/store@18 ngx-infinite-scroll@18 --force
+git add .
+git commit -m "update angular 18 and 3rd party deps angular 18 compatible"
+```
+Note: Do not select `use-application-builder` migration when migrating to Angular 18. Applications created before SPA 2211.19 doesn't support this builder. Applications created starting from 2211.19 already supports it.
+
+### Run Spartacus update
+
+After successfully updating the application to Angular 18, execute this command to initiate the Spartacus update process.
+
+```bash
+ng update @spartacus/schematics@latest
+```
+
+### Adjust Angular configuration
+
+Due to changes in Angular's application builder, for applications created starting from SPA 2211.19, you need to adjust the `angular.json` file to generate the `index.html` file in the `dist` folder. This is required for CCv2 to map `OCC_BACKEND_BASE_URL_VALUE` and `MEDIA_BACKEND_BASE_URL_VALUE` meta tags to the correct values. Unfortunately, this will contribute to pre-rendering to not work properly (which is a known issue)
+
+```diff
+- "index": "src/index.html"
++ "index": {
++    "input": "src/index.html",
++    "output": "index.html"
++ }
+```

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/customer-360/styles/components/_index.scss

@@ -1,11 +1,11 @@
 @import '@spartacus/styles/scss/core';
 
-@import './_asm-customer-360.component.scss';
-@import './_asm-customer-360-profile.scss';
+@import './_asm-customer-360.component';
+@import './_asm-customer-360-profile';
 @import './_asm-customer-360-product-listing.component';
-@import './_asm-customer-360-table.component.scss';
-@import './_asm-customer-360-map.component.scss';
-@import './_asm-customer-360-promotion-listing.component.scss';
+@import './_asm-customer-360-table.component';
+@import './_asm-customer-360-map.component';
+@import './_asm-customer-360-promotion-listing.component';
 
 $customer-360-components-allowlist: cx-asm-customer-360,
   cx-asm-customer-360-profile, cx-asm-customer-360-product-listing,

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.9",
+    "@angular/common": "^18.2.9",
+    "@angular/core": "^18.2.9",
+    "@angular/forms": "^18.2.9",
+    "@ng-select/ng-select": "^13.9.1",
+    "@ngrx/effects": "^18.1.1",
+    "@ngrx/store": "^18.1.1",
     "@spartacus/cart": "2211.32.0-1",
     "@spartacus/core": "2211.32.0-1",
     "@spartacus/order": "2211.32.0-1",

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(),
       ],
     });