feat: schematics for guide (2) - modernize-apps-migrated-from-2211.32-to-2211.35.md

projects/schematics/src/collection.json

@@ -35,6 +35,10 @@
     "modernize-app-migrated-from-6_8-to-2211_19": {
       "description": "Modernize Angular application migrated from 6.8 to 22.11.19",
       "factory": "./modernize-app-migrated-from-6_8-to-2211_19/index#migrate"
+    },
+    "modernize-app-migrated-from-2211_32-to-2211_35": {
+      "description": "Modernize Angular application migrated from 2211.32 to 2211.35",
+      "factory": "./modernize-app-migrated-from-2211_32-to-2211_35/index#migrate"
     }
   }
 }

projects/schematics/src/migrations/2211_35/ssr/ssr.ts

@@ -5,13 +5,11 @@
  */
 
 import { noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
-import { checkIfSSRIsUsedWithApplicationBuilder } from '../../../shared/utils/package-utils';
+import { isSsrUsed } from '../../../shared/utils/package-utils';
 import { updateServerFile } from './update-ssr/update-server-files';
 
 export function migrate(): Rule {
   return (tree: Tree, _context: SchematicContext) => {
-    return checkIfSSRIsUsedWithApplicationBuilder(tree)
-      ? updateServerFile()
-      : noop();
+    return isSsrUsed(tree) ? updateServerFile() : noop();
   };
 }

projects/schematics/src/migrations/2211_35/ssr/ssr_spec.ts

@@ -5,7 +5,7 @@ import * as shared from '../../../shared/utils/package-utils';
 
 jest.mock('../../../shared/utils/package-utils', () => ({
   ...jest.requireActual('../../../shared/utils/package-utils'),
-  checkIfSSRIsUsedWithApplicationBuilder: jest.fn(),
+  isSsrUsed: jest.fn(),
 }));
 
 const collectionPath = join(__dirname, '../../migrations.json');
@@ -68,9 +68,7 @@ describe('Update SSR Migration', () => {
   it.each(['/server.ts', '/src/server.ts'])(
     'should update %s when using application builder and SSR is used',
     async (filePath) => {
-      (
-        shared.checkIfSSRIsUsedWithApplicationBuilder as jest.Mock
-      ).mockReturnValue(true);
+      (shared.isSsrUsed as jest.Mock).mockReturnValue(true);
       tree.create(filePath, serverFileContent);
 
       const newTree = await runner.runSchematic(
@@ -83,16 +81,12 @@ describe('Update SSR Migration', () => {
       expect(content).toContain('export function app()');
       expect(content).toContain("join(serverDistFolder, 'index.server.html')");
       expect(content).not.toContain("join(browserDistFolder, 'index.html')");
-      expect(
-        shared.checkIfSSRIsUsedWithApplicationBuilder
-      ).toHaveBeenCalledWith(tree);
+      expect(shared.isSsrUsed).toHaveBeenCalledWith(tree);
     }
   );
 
   it('should not update when SSR is not used', async () => {
-    (
-      shared.checkIfSSRIsUsedWithApplicationBuilder as jest.Mock
-    ).mockReturnValue(false);
+    (shared.isSsrUsed as jest.Mock).mockReturnValue(false);
     tree.create('/server.ts', serverFileContent);
 
     const newTree = await runner.runSchematic(MIGRATION_SCRIPT_NAME, {}, tree);
@@ -102,29 +96,21 @@ describe('Update SSR Migration', () => {
     expect(content).not.toContain(
       "join(serverDistFolder, 'index.server.html')"
     );
-    expect(shared.checkIfSSRIsUsedWithApplicationBuilder).toHaveBeenCalledWith(
-      tree
-    );
+    expect(shared.isSsrUsed).toHaveBeenCalledWith(tree);
   });
 
   it('should handle missing server.ts file', async () => {
-    (
-      shared.checkIfSSRIsUsedWithApplicationBuilder as jest.Mock
-    ).mockReturnValue(true);
+    (shared.isSsrUsed as jest.Mock).mockReturnValue(true);
 
     const newTree = await runner.runSchematic(MIGRATION_SCRIPT_NAME, {}, tree);
 
     expect(newTree.exists('/server.ts')).toBe(false);
     expect(newTree.exists('/src/server.ts')).toBe(false);
-    expect(shared.checkIfSSRIsUsedWithApplicationBuilder).toHaveBeenCalledWith(
-      tree
-    );
+    expect(shared.isSsrUsed).toHaveBeenCalledWith(tree);
   });
 
   it('should preserve other join statements when SSR is used', async () => {
-    (
-      shared.checkIfSSRIsUsedWithApplicationBuilder as jest.Mock
-    ).mockReturnValue(true);
+    (shared.isSsrUsed as jest.Mock).mockReturnValue(true);
 
     const contentWithMultipleJoins = `
       const otherFile = join(process.cwd(), 'other.html');
@@ -140,8 +126,6 @@ describe('Update SSR Migration', () => {
     expect(content).toContain("join(process.cwd(), 'other.html')");
     expect(content).toContain('join(serverDistFolder, "index.server.html")');
     expect(content).toContain("join(process.cwd(), 'another.html')");
-    expect(shared.checkIfSSRIsUsedWithApplicationBuilder).toHaveBeenCalledWith(
-      tree
-    );
+    expect(shared.isSsrUsed).toHaveBeenCalledWith(tree);
   });
 });

projects/schematics/src/modernize-app-migrated-from-2211_32-to-2211_35/csr-and-ssr/move-assets-to-public.ts

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { printErrorWithDocsForMigrated_2211_32_To_2211_35 as printErrorWithDocs } from '../fallback-advice-to-follow-docs';
+
+/**
+ * Moves the `src/assets/` folder to the root and renames it to `public/`,
+ * to adapt to the new Angular v19 standards.
+ */
+export function moveAssetsToPublic(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    enum AssetsDirs {
+      OLD = 'src/assets',
+      NEW = 'public',
+    }
+
+    context.logger.info(
+      `\n⏳ Moving assets folder from "${AssetsDirs.OLD}/" to "${AssetsDirs.NEW}/"...`
+    );
+
+    const sourceDir = tree.getDir(AssetsDirs.OLD);
+    if (!sourceDir.subfiles.length && !sourceDir.subdirs.length) {
+      printErrorWithDocs(
+        `Assets folder not found or empty at ${AssetsDirs.OLD}`,
+        context
+      );
+      return;
+    }
+
+    try {
+      tree.getDir(AssetsDirs.OLD).visit((filePath) => {
+        const relativeFilePath = filePath.replace(`${AssetsDirs.OLD}/`, '');
+        context.logger.info(`  ↳ Moving file "${filePath}"`);
+
+        const content = tree.read(filePath);
+        if (content) {
+          tree.create(`${AssetsDirs.NEW}/${relativeFilePath}`, content);
+        } else {
+          printErrorWithDocs(`Failed to read ${filePath} file`, context);
+          return;
+        }
+      });
+    } catch (error) {
+      printErrorWithDocs(
+        `Error moving assets file from "${AssetsDirs.OLD}" to "${AssetsDirs.NEW}". Error: ${error}`,
+        context
+      );
+    }
+
+    context.logger.info(`  ↳ Deleting old "${AssetsDirs.OLD}/" directory`);
+    try {
+      tree.delete(AssetsDirs.OLD);
+    } catch (error) {
+      printErrorWithDocs(
+        `Error deleting old assets directory "${AssetsDirs.OLD}". Error: ${error}`,
+        context
+      );
+    }
+
+    context.logger.info(
+      `✅ Moved assets folder from "${AssetsDirs.OLD}/" to "${AssetsDirs.NEW}/"`
+    );
+  };
+}

projects/schematics/src/modernize-app-migrated-from-2211_32-to-2211_35/csr-and-ssr/move-favicon-to-public.ts

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { printErrorWithDocsForMigrated_2211_32_To_2211_35 as printErrorWithDocs } from '../fallback-advice-to-follow-docs';
+
+/**
+ * Moves the `favicon.ico` file from the `src/` folder to the `public/` folder,
+ * to adapt to the new Angular v19 standards.
+ */
+export function moveFaviconToPublic(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const fileName = 'favicon.ico';
+
+    const oldDir = 'src';
+    const oldPath = `${oldDir}/${fileName}`;
+
+    const newDir = 'public';
+    const newPath = `${newDir}/${fileName}`;
+
+    context.logger.info(
+      `\n⏳ Moving ${fileName} from "${oldDir}/" to "${newDir}/"...`
+    );
+
+    if (!tree.exists(oldPath)) {
+      printErrorWithDocs(`Favicon not found at ${oldPath}`, context);
+      return;
+    }
+
+    const content = tree.read(oldPath);
+    if (content) {
+      tree.create(newPath, content);
+      tree.delete(oldPath);
+    } else {
+      printErrorWithDocs(`Failed to read ${oldPath} file`, context);
+      return;
+    }
+
+    context.logger.info(
+      `✅ Moved ${fileName} from "${oldDir}/" to "${newDir}/"`
+    );
+  };
+}

projects/schematics/src/modernize-app-migrated-from-2211_32-to-2211_35/csr-and-ssr/update-angular-json.ts

@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { getWorkspace } from '../../shared/utils/workspace-utils';
+import { printErrorWithDocsForMigrated_2211_32_To_2211_35 as printErrorWithDocs } from '../fallback-advice-to-follow-docs';
+import {
+  BrowserBuilderBaseOptions,
+  BrowserBuilderTarget,
+} from '@schematics/angular/utility/workspace-models';
+
+/**
+ * Updates the Angular configuration file to new Angular v19 standards.
+ *
+ * It updates the "assets" property for the "build" and "test" targets,
+ * to use the new path with the `public/` folder,
+ * instead of `src/assets` and `src/favicon.ico`.
+ */
+export function updateAngularJson(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('\n⏳ Updating angular.json assets configuration...');
+
+    const { workspace, path } = getWorkspace(tree);
+    const project = workspace.projects[Object.keys(workspace.projects)[0]];
+
+    if (!project) {
+      printErrorWithDocs('No project found in workspace', context);
+      return;
+    }
+
+    const buildTarget = project.architect?.build as BrowserBuilderTarget;
+    const testTarget = project.architect?.test;
+
+    if (!buildTarget) {
+      printErrorWithDocs(
+        'Could not find "build" target in project configuration',
+        context
+      );
+      return;
+    }
+
+    const oldAssets: BrowserBuilderBaseOptions['assets'] = [
+      'src/favicon.ico',
+      'src/assets',
+    ];
+    const newAssets: BrowserBuilderBaseOptions['assets'] = [
+      { glob: '**/*', input: 'public' },
+    ];
+
+    context.logger.info(
+      `  ↳ Removing "assets" configuration for ${oldAssets
+        .map((x) => `"${x}"`)
+        .join(', ')}`
+    );
+    context.logger.info(
+      '  ↳ Adding "assets" configuration: `{ glob: "**/*", input: "public" }`'
+    );
+
+    if (Array.isArray(buildTarget.options?.assets)) {
+      buildTarget.options.assets = buildTarget.options.assets.filter(
+        (asset: string | object) => !oldAssets.includes(asset)
+      );
+
+      // Add the new public assets config
+      buildTarget.options.assets = [
+        ...newAssets,
+        ...buildTarget.options.assets,
+      ];
+    } else {
+      printErrorWithDocs(
+        'Could not find "assets" array in "build" target configuration',
+        context
+      );
+    }
+
+    // Update config for "test" target
+    if (Array.isArray(testTarget?.options?.assets)) {
+      testTarget.options.assets = testTarget.options.assets.filter(
+        (asset: string | object) => !oldAssets.includes(asset)
+      );
+
+      // Add the new public assets config
+      testTarget.options.assets = [...newAssets, ...testTarget.options.assets];
+    } else {
+      printErrorWithDocs(
+        'Could not find "assets" array in "test" target configuration',
+        context
+      );
+    }
+
+    tree.overwrite(path, JSON.stringify(workspace, null, 2));
+    context.logger.info('✅ Updated angular.json assets configuration');
+  };
+}