SAP · kpawelczak · Sep 30, 2024 · Nov 25, 2024 · Nov 25, 2024 · Nov 25, 2024
@@ -15,7 +15,6 @@
       ],
       "plugins": ["deprecation", "@typescript-eslint", "@nx", "@stylistic/ts"],
       "rules": {
-        "@angular-eslint/no-host-metadata-property": "off",
         "deprecation/deprecation": "warn",
         "prefer-arrow/prefer-arrow-functions": "off",
         "space-before-function-paren": "off",
@@ -30,6 +29,7 @@
         "no-fallthrough": "off",
         "prefer-const": "off",
         "@angular-eslint/use-lifecycle-interface": "error",
+        "@angular-eslint/prefer-standalone": "off",
         "@stylistic/ts/quotes": "off",
         "@stylistic/ts/member-delimiter-style": [
           "error",

@@ -5,4 +5,5 @@ feature-libs/smartedit/assets/webApplicationInjector.js
 coverage
 
 /.nx/cache
-/.nx/workspace-data
+/.nx/workspace-data
+projects/storefrontstyles/vendor/**/*.scss
@@ -38,8 +38,14 @@
       "margin-inline"
     ],
     "declaration-property-value-disallowed-list": {
-      "text-align": ["right", "left"]
+      "text-align": [
+        "right",
+        "left"
+      ]
     },
     "scss/comment-no-loud": true
-  }
+  },
+  "ignoreFiles": [
+    "projects/storefrontstyles/vendor/**/*.scss"
+  ]
 }
@@ -158,4 +158,3 @@ Many improvements are coming! All tasks will be posted to our GitHub issue track
 
 Copyright (c) 2024 SAP SE or an SAP affiliate company. All rights reserved.
 This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE](LICENSE) file.
-
@@ -5,9 +5,18 @@ const { defaultTransformerOptions } = require('jest-preset-angular/presets');
 /** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 module.exports = {
   preset: 'jest-preset-angular',
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
-    prefix: '<rootDir>/',
-  }),
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(compilerOptions.paths || {}, {
+      prefix: '<rootDir>/',
+    }),
+    // mapping required to use `beasties` from node modules that has proper ES module format
+    // instead of the version internalized by the Angular Team which file format is not supported
+    // by Jest.
+    // for more, see: https://github.com/angular/angular-cli/pull/28228
+    // and: https://github.com/angular/angular-cli/pull/28726
+    '^../third_party/beasties/index.js$':
+      '<rootDir>/../../node_modules/beasties',
+  },
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
   transform: {
     '^.+\\.(ts|js|mjs|html|svg)$': [

@@ -19,15 +19,15 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/core": "^18.2.9",
-    "@angular/ssr": "^18.2.9",
+    "@angular/core": "^19.0.3",
+    "@angular/ssr": "^19.0.4",
     "@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": "^18.2.9",
+    "@angular/platform-server": "^19.0.3",
     "express": "^4.21.2"
   },
   "publishConfig": {

@@ -4,7 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { CommonEngineOptions, CommonEngineRenderOptions } from '@angular/ssr';
+import {
+  CommonEngineOptions,
+  CommonEngineRenderOptions,
+} from '@angular/ssr/node';
 import { NgSetupOptions } from '../engine/ng-express-engine';
 import {
   OptimizedSsrEngine,

@@ -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="18.2.9" ng-server-context="ssr">message:test</cx-token></body></html>"`;
+exports[`CxCommonEngine should not override providers passed to options 1`] = `"<html data-beasties-container><head></head><body><cx-token ng-version="19.0.3" 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="18.2.9" ng-server-context="ssr">some template</cx-mock></body></html>"`;
+exports[`CxCommonEngine should return html if no errors 1`] = `"<html data-beasties-container><head></head><body><cx-mock ng-version="19.0.3" ng-server-context="ssr">some template</cx-mock></body></html>"`;
@@ -8,7 +8,11 @@ import { PROPAGATE_ERROR_TO_SERVER } from '../error-handling/error-response/prop
 import { CxCommonEngine } from './cx-common-engine';
 
 // Test how the CxCommonEngine handles successful server-side rendering
-@Component({ selector: 'cx-mock', template: 'some template' })
+@Component({
+  selector: 'cx-mock',
+  template: 'some template',
+  standalone: false,
+})
 export class SuccessComponent {}
 
 @NgModule({
@@ -22,6 +26,7 @@ export class SuccessServerModule {}
 @Component({
   selector: 'cx-response',
   template: ``,
+  standalone: false,
 })
 export class WithPropagatedErrorComponent {
   constructor() {
@@ -43,6 +48,7 @@ export const SOME_TOKEN = new InjectionToken<string>('SOME_TOKEN');
 @Component({
   selector: 'cx-token',
   template: `message:{{ someToken }}`,
+  standalone: false,
 })
 export class TokenComponent {
   someToken = inject(SOME_TOKEN);

@@ -8,7 +8,7 @@ import {
   CommonEngine,
   CommonEngineOptions,
   CommonEngineRenderOptions,
-} from '@angular/ssr';
+} from '@angular/ssr/node';
 import { PROPAGATE_ERROR_TO_SERVER } from '../error-handling/error-response/propagate-error-to-server';
 
 /**

@@ -25,7 +25,11 @@ import { ngExpressEngine } from './ng-express-engine';
  * - https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/spec/mock.server.module.ts
  *
  */
-@Component({ selector: 'cx-mock', template: 'some template' })
+@Component({
+  selector: 'cx-mock',
+  template: 'some template',
+  standalone: false,
+})
 export class MockComponent {}
 
 /**
@@ -57,7 +61,11 @@ export class MockServerModule {}
  * - https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/spec/mock.server.module.ts
  *
  */
-@Component({ selector: 'cx-request', template: `url:{{ _req.url }}` })
+@Component({
+  selector: 'cx-request',
+  template: `url:{{ _req.url }}`,
+  standalone: false,
+})
 export class RequestComponent {
   constructor(@Inject(REQUEST) public readonly _req: any) {}
 }
@@ -94,6 +102,7 @@ export class RequestServerModule {}
 @Component({
   selector: 'cx-response',
   template: `statusCode:{{ _res.statusCode }}`,
+  standalone: false,
 })
 export class ResponseComponent {
   constructor(@Inject(RESPONSE) public readonly _res: any) {}
@@ -144,6 +153,7 @@ export const SOME_TOKEN = new InjectionToken<string>('SOME_TOKEN');
 @Component({
   selector: 'cx-token',
   template: `message:{{ _someToken.message }}`,
+  standalone: false,
 })
 export class TokenComponent {
   constructor(@Inject(SOME_TOKEN) public readonly _someToken: any) {}

@@ -5,7 +5,10 @@
  */
 
 import { StaticProvider } from '@angular/core';
-import { CommonEngineOptions, CommonEngineRenderOptions } from '@angular/ssr';
+import {
+  CommonEngineOptions,
+  CommonEngineRenderOptions,
+} from '@angular/ssr/node';
 import { Request, Response } from 'express';
 import { REQUEST, RESPONSE } from '../tokens/express.tokens';
 import { CxCommonEngine } from './cx-common-engine';

@@ -28,7 +28,10 @@ export class RenderingCache {
     if (this.options?.cacheSize) {
       this.renders.delete(key);
       if (this.renders.size >= this.options.cacheSize) {
-        this.renders.delete(this.renders.keys().next().value);
+        const oldestKey = this.renders.keys().next().value;
+        if (oldestKey !== undefined) {
+          this.renders.delete(oldestKey);
+        }
       }
     }
     // cache only if shouldCacheRenderingResult return true

diff --git a/docs/migration/2211_ng18/bootstrap.md b/docs/migration/2211_ng18/bootstrap.md
@@ -0,0 +1,53 @@
+# Spartacus migration - Bootstrap
+
+1. Uninstall Bootstrap
+   If the bootstrap package is still installed in your project, uninstall it to avoid conflicts. Use
+   the following command:
+   ```npm uninstall bootstrap```
+2. Update `styles.scss`
+   Modify the `styles.scss` file to integrate Spartacus styles along with Bootstrap. Proper import order is critical for
+   styles to be applied correctly.
+### Steps to Update:
+1. Place the following import for styles-config at the top of the file:
+       ```@import 'styles-config';```
+2. Add Spartacus core styles first. Importing Spartacus styles before Bootstrap ensures core styles load as a
+   priority.
+3. Follow this by importing Bootstrap styles using the Bootstrap copy provided by Spartacus. Ensure the order of
+   Bootstrap imports matches the sequence below for consistency.
+4. Conclude with the Spartacus index styles.
+
+
+   Final file structure should look like this:
+
+```styles.scss
+// ORDER IMPORTANT: Spartacus core first
+@import '@spartacus/styles/scss/core';
+
+// ORDER IMPORTANT: Bootstrap next
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+@import '@spartacus/styles/vendor/bootstrap/scss/type';
+@import '@spartacus/styles/vendor/bootstrap/scss/grid';
+@import '@spartacus/styles/vendor/bootstrap/scss/utilities';
+@import '@spartacus/styles/vendor/bootstrap/scss/transitions';
+@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';
+@import '@spartacus/styles/vendor/bootstrap/scss/card';
+@import '@spartacus/styles/vendor/bootstrap/scss/nav';
+@import '@spartacus/styles/vendor/bootstrap/scss/buttons';
+@import '@spartacus/styles/vendor/bootstrap/scss/forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/modal';
+@import '@spartacus/styles/vendor/bootstrap/scss/close';
+@import '@spartacus/styles/vendor/bootstrap/scss/alert';
+@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';
+
+@import '@spartacus/styles/index';
+```
+3. Individual imports.
+   If your application directly imports specific Bootstrap classes in any of your stylesheets, replace those imports with the corresponding Spartacus imports. For example:
+```
+// Original import
+@import '~bootstrap/scss/reboot';
+
+// Replace with
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+```
diff --git a/docs/migration/2211_ng18/migration.md b/docs/migration/2211_ng18/migration.md
diff --git a/docs/migration/2211_ng19/migration.md b/docs/migration/2211_ng19/migration.md
@@ -0,0 +1,53 @@
+# (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 and then to v19
+
+## Update Angular to 18 and 19
+
+### Update Angular to 18 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.
+
+### Update Angular to 19 and 3rd party deps to be compatible with Angular 19
+
+Follow the [Angular guidelines for upgrading from v18 to v19](https://angular.dev/update-guide?v=18.0-19.0&l=3) and bump the Angular version locally, and update other 3rd party dependencies from Angular ecosystem  to versions compatible with Angular 19 (e.g. `@ng-select/ng-select@14`, `@ngrx/store@19`, `ngx-infinite-scroll@19`):
+
+```bash
+ng update @angular/cli@19 @angular/core@19 ngx-infinite-scroll@19 @ng-select/ng-select@14 @ngrx/store@19 angular-oauth2-oidc@19 --force
+git add .
+git commit -m "update angular 19 and 3rd party deps angular 19 compatible"
+```
+
+Note: Unselect `use-application-builder` migration when migrating to Angular 19. 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 19, execute this command to initiate the Spartacus update process.
+
+```bash
+ng update @spartacus/schematics@latest
+```
+
+### If using Server Side Rendering (SSR) and `application` builder
+
+For applications using `application` builder having SSR support, you need to adjust the `server.ts` file to be compatible with the output generated by the builder.
+
+```diff
+/* ... */
+- const indexHtml = path.join(browserDistFolder, 'index.html');
++ const indexHtml = path.join(serverDistFolder, 'index.server.html');
+```
+
+
+
+
+
@@ -1,4 +1,9 @@
 {
   "extends": "../../.eslintrc.json",
-  "ignorePatterns": ["schematics/**/*.d.ts"]
+  "ignorePatterns": ["schematics/**/*.d.ts"],
+  "overrides": [
+    {
+      "files": ["*.ts"]
+    }
+  ]
 }
@@ -9,6 +9,7 @@ import {
 
 @Pipe({
   name: 'cxTranslate',
+  standalone: false,
 })
 class MockTranslatePipe implements PipeTransform {
   transform(): any {}

@@ -15,6 +15,7 @@ export enum BIND_CART_DIALOG_ACTION {
 @Component({
   selector: 'cx-asm-bind-cart-dialog',
   templateUrl: './asm-bind-cart-dialog.component.html',
+  standalone: false,
 })
 export class AsmBindCartDialogComponent {
   BIND_CART_ACTION = BIND_CART_DIALOG_ACTION;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -158,4 +158,3 @@ Many improvements are coming! All tasks will be posted to our GitHub issue track

		Copyright (c) 2024 SAP SE or an SAP affiliate company. All rights reserved.
		This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE](LICENSE) file.