fix(@angular-devkit/build-angular): clean up internal Angular state d…

…uring rendering SSR This commit clean ups the compiled components state when the build is being executed in watch mode. This is required as otherwise during development `Component ID generation collision detected` are displayed on the server. Closes: #25924
angular · Sep 29, 2023 · 2d2e799 · 2d2e799
1 parent 0368b23
commit 2d2e799
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/application-code-bundle.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/application-code-bundle.ts
@@ -134,7 +134,15 @@ export function createServerCodeBundleOptions(
   target: string[],
   sourceFileCache: SourceFileCache,
 ): BuildOptions {
-  const { jit, serverEntryPoint, workspaceRoot, ssrOptions } = options;
+  const {
+    jit,
+    serverEntryPoint,
+    workspaceRoot,
+    ssrOptions,
+    watch,
+    externalPackages,
+    prerenderOptions,
+  } = options;
 
   assert(
     serverEntryPoint,
@@ -194,7 +202,7 @@ export function createServerCodeBundleOptions(
   };
 
   buildOptions.plugins ??= [];
-  if (options.externalPackages) {
+  if (externalPackages) {
     buildOptions.packages = 'external';
   } else {
     buildOptions.plugins.push(createRxjsEsmResolutionPlugin());
@@ -225,7 +233,11 @@ export function createServerCodeBundleOptions(
           `export { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';`,
         ];
 
-        if (options.prerenderOptions?.discoverRoutes) {
+        if (watch) {
+          contents.push(`export { ɵresetCompiledComponents } from '@angular/core';`);
+        }
+
+        if (prerenderOptions?.discoverRoutes) {
           // We do not import it directly so that node.js modules are resolved using the correct context.
           const routesExtractorCode = await readFile(
             join(__dirname, '../../utils/routes-extractor/extractor.js'),

diff --git a/packages/angular_devkit/build_angular/src/utils/server-rendering/main-bundle-exports.ts b/packages/angular_devkit/build_angular/src/utils/server-rendering/main-bundle-exports.ts
@@ -25,4 +25,6 @@ export interface MainServerBundleExports {
 
   /** Method to extract routes from the router config. */
   extractRoutes: typeof extractRoutes;
+
+  ɵresetCompiledComponents?: () => void;
 }
diff --git a/packages/angular_devkit/build_angular/src/utils/server-rendering/render-page.ts b/packages/angular_devkit/build_angular/src/utils/server-rendering/render-page.ts
@@ -45,8 +45,14 @@ export async function renderPage({
     ɵSERVER_CONTEXT,
     renderModule,
     renderApplication,
+    ɵresetCompiledComponents,
   } = await loadBundle('./main.server.mjs');
 
+  // Need to clean up GENERATED_COMP_IDS map in `@angular/core`.
+  // Otherwise an incorrect component ID generation collision detected warning will be displayed in development.
+  // See: https://github.com/angular/angular-cli/issues/25924
+  ɵresetCompiledComponents?.();
+
   const platformProviders: StaticProvider[] = [
     {
       provide: ɵSERVER_CONTEXT,