fix(@schematics/angular): infer app component name and path in server schematic

crisbeto · crisbeto · commit 2397b22a20f1 · 2025-04-04T20:27:26.000+02:00
Currently the `server` schematic assumes that the app component is called `App` and it's places in `./app/app`. This will fail if the user renamed it or moved it to a different file.

These changes add a utility function to resolve the component name and path from the source the source code, and they use the new function to produce a more accurate result.
diff --git a/packages/schematics/angular/server/files/application-builder/ngmodule-src/app/app.module.server.ts.template b/packages/schematics/angular/server/files/application-builder/ngmodule-src/app/app.module.server.ts.template
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { provideServerRendering, withRoutes } from '@angular/ssr';
-import { App } from './app';
-import { AppModule } from './app.module';
+import { <%= appComponentName %> } from '<%= appComponentPath %>';
+import { <%= appModuleName %> } from '<%= appModulePath %>';
 import { serverRoutes } from './app.routes.server';
 
 @NgModule({
-  imports: [AppModule],
+  imports: [<%= appModuleName %>],
   providers: [provideServerRendering(withRoutes(serverRoutes))],
-  bootstrap: [App],
+  bootstrap: [<%= appComponentName %>],
 })
 export class AppServerModule {}
diff --git a/packages/schematics/angular/server/files/application-builder/standalone-src/main.server.ts.template b/packages/schematics/angular/server/files/application-builder/standalone-src/main.server.ts.template
@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
+import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(App, config);
+const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
 
 export default bootstrap;
diff --git a/packages/schematics/angular/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template b/packages/schematics/angular/server/files/server-builder/ngmodule-src/app/app.module.server.ts.template
@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 
-import { AppModule } from './app.module';
-import { App } from './app';
+import { <%= appModuleName %> } from '<%= appModulePath %>';
+import { <%= appComponentName %> } from '<%= appComponentPath %>';
 
 @NgModule({
   imports: [
-    AppModule,
+    <%= appModuleName %>,
     ServerModule,
   ],
-  bootstrap: [App],
+  bootstrap: [<%= appComponentName %>],
 })
 export class AppServerModule {}
diff --git a/packages/schematics/angular/server/files/server-builder/standalone-src/main.server.ts.template b/packages/schematics/angular/server/files/server-builder/standalone-src/main.server.ts.template
@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
+import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(App, config);
+const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
 
 export default bootstrap;
diff --git a/packages/schematics/angular/server/index.ts b/packages/schematics/angular/server/index.ts
@@ -27,6 +27,7 @@ import { latestVersions } from '../utility/latest-versions';
 import { isStandaloneApp } from '../utility/ng-ast-utils';
 import { relativePathToWorkspaceRoot } from '../utility/paths';
 import { isUsingApplicationBuilder, targetBuildNotFoundError } from '../utility/project-targets';
+import { resolveBootstrappedComponentData } from '../utility/standalone/app_component';
 import { getMainFilePath } from '../utility/standalone/util';
 import { getWorkspace, updateWorkspace } from '../utility/workspace';
 import { Builders } from '../utility/workspace-models';
@@ -187,10 +188,24 @@ export default function (options: ServerOptions): Rule {
     let filesUrl = `./files/${usingApplicationBuilder ? 'application-builder/' : 'server-builder/'}`;
     filesUrl += isStandalone ? 'standalone-src' : 'ngmodule-src';
 
+    const { componentName, componentImportPathInSameFile, moduleName, moduleImportPathInSameFile } =
+      resolveBootstrappedComponentData(host, browserEntryPoint) || {
+        componentName: 'App',
+        componentImportPathInSameFile: './app/app',
+        moduleName: 'AppModule',
+        moduleImportPathInSameFile: './app/app.module',
+      };
     const templateSource = apply(url(filesUrl), [
       applyTemplates({
         ...strings,
         ...options,
+        appComponentName: componentName,
+        appComponentPath: componentImportPathInSameFile,
+        appModuleName: moduleName,
+        appModulePath:
+          moduleImportPathInSameFile === null
+            ? null
+            : `./${posix.basename(moduleImportPathInSameFile)}`,
       }),
       move(sourceRoot),
     ]);
diff --git a/packages/schematics/angular/server/index_spec.ts b/packages/schematics/angular/server/index_spec.ts
@@ -70,6 +70,84 @@ describe('Server Schematic', () => {
       );
     });
 
+    it('should account for renamed app component and module', async () => {
+      appTree.create(
+        '/projects/bar/src/app/my-custom-module.ts',
+        `
+          import { NgModule } from '@angular/core';
+          import { BrowserModule } from '@angular/platform-browser';
+          import { MyCustomApp } from './foo/bar/baz/app.foo';
+
+          @NgModule({
+            declarations: [MyCustomApp],
+            imports: [BrowserModule],
+            bootstrap: [MyCustomApp]
+          })
+          export class MyCustomModule {}
+      `,
+      );
+
+      appTree.overwrite(
+        '/projects/bar/src/main.ts',
+        `
+        import { platformBrowser } from '@angular/platform-browser';
+        import { MyCustomModule } from './app/my-custom-module';
+
+        platformBrowser().bootstrapModule(MyCustomModule)
+          .catch(err => console.error(err));
+      `,
+      );
+
+      const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
+      const filePath = '/projects/bar/src/app/app.module.server.ts';
+      expect(tree.exists(filePath)).toBeTrue();
+      const contents = tree.readContent(filePath);
+
+      expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
+      expect(contents).toContain(`import { MyCustomModule } from './my-custom-module';`);
+      expect(contents).toContain(`imports: [MyCustomModule],`);
+      expect(contents).toContain(`bootstrap: [MyCustomApp],`);
+    });
+
+    it('should account for renamed app component and module that have been aliased', async () => {
+      appTree.create(
+        '/projects/bar/src/app/my-custom-module.ts',
+        `
+          import { NgModule } from '@angular/core';
+          import { BrowserModule } from '@angular/platform-browser';
+          import { MyCustomApp as MyAliasedApp } from './foo/bar/baz/app.foo';
+
+          @NgModule({
+            declarations: [MyAliasedApp],
+            imports: [BrowserModule],
+            bootstrap: [MyAliasedApp]
+          })
+          export class MyCustomModule {}
+      `,
+      );
+
+      appTree.overwrite(
+        '/projects/bar/src/main.ts',
+        `
+        import { platformBrowser } from '@angular/platform-browser';
+        import { MyCustomModule as MyAliasedModule } from './app/my-custom-module';
+
+        platformBrowser().bootstrapModule(MyAliasedModule)
+          .catch(err => console.error(err));
+      `,
+      );
+
+      const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
+      const filePath = '/projects/bar/src/app/app.module.server.ts';
+      expect(tree.exists(filePath)).toBeTrue();
+      const contents = tree.readContent(filePath);
+
+      expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
+      expect(contents).toContain(`import { MyCustomModule } from './my-custom-module';`);
+      expect(contents).toContain(`imports: [MyCustomModule],`);
+      expect(contents).toContain(`bootstrap: [MyCustomApp],`);
+    });
+
     it('should add dependency: @angular/platform-server', async () => {
       const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
       const filePath = '/package.json';
@@ -127,6 +205,48 @@ describe('Server Schematic', () => {
       expect(contents).toContain(`bootstrapApplication(App, config)`);
     });
 
+    it('should account for renamed app component', async () => {
+      appTree.overwrite(
+        '/projects/bar/src/main.ts',
+        `
+        import { bootstrapApplication } from '@angular/platform-browser';
+        import { appConfig } from './app/app.config';
+        import { MyCustomApp } from './foo/bar/baz/app.foo';
+
+        bootstrapApplication(MyCustomApp, appConfig)
+          .catch((err) => console.error(err));
+      `,
+      );
+
+      const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
+      const filePath = '/projects/bar/src/main.server.ts';
+      expect(tree.exists(filePath)).toBeTrue();
+      const contents = tree.readContent(filePath);
+      expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
+      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config)`);
+    });
+
+    it('should account for renamed app component that is aliased within the main file', async () => {
+      appTree.overwrite(
+        '/projects/bar/src/main.ts',
+        `
+        import { bootstrapApplication } from '@angular/platform-browser';
+        import { appConfig } from './app/app.config';
+        import { MyCustomApp as MyCustomAlias } from './foo/bar/baz/app.foo';
+
+        bootstrapApplication(MyCustomAlias, appConfig)
+          .catch((err) => console.error(err));
+      `,
+      );
+
+      const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
+      const filePath = '/projects/bar/src/main.server.ts';
+      expect(tree.exists(filePath)).toBeTrue();
+      const contents = tree.readContent(filePath);
+      expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
+      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config)`);
+    });
+
     it('should create server app config file', async () => {
       const tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
       const filePath = '/projects/bar/src/app/app.config.server.ts';
diff --git a/packages/schematics/angular/utility/ast-utils.ts b/packages/schematics/angular/utility/ast-utils.ts
@@ -343,7 +343,7 @@ export function getDecoratorMetadata(
 export function getMetadataField(
   node: ts.ObjectLiteralExpression,
   metadataField: string,
-): ts.ObjectLiteralElement[] {
+): ts.PropertyAssignment[] {
   return (
     node.properties
       .filter(ts.isPropertyAssignment)
@@ -561,13 +561,9 @@ export function getRouterModuleDeclaration(source: ts.SourceFile): ts.Expression
   }
 
   const matchingProperties = getMetadataField(node, 'imports');
-  if (!matchingProperties) {
-    return;
-  }
-
-  const assignment = matchingProperties[0] as ts.PropertyAssignment;
+  const assignment = matchingProperties[0];
 
-  if (assignment.initializer.kind !== ts.SyntaxKind.ArrayLiteralExpression) {
+  if (!assignment || assignment.initializer.kind !== ts.SyntaxKind.ArrayLiteralExpression) {
     return;
   }
 
diff --git a/packages/schematics/angular/utility/standalone/app_component.ts b/packages/schematics/angular/utility/standalone/app_component.ts
@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { SchematicsException, Tree } from '@angular-devkit/schematics';
+import ts from '../../third_party/github.com/Microsoft/TypeScript/lib/typescript';
+import { getDecoratorMetadata, getMetadataField } from '../ast-utils';
+import { findBootstrapModuleCall, getAppModulePath } from '../ng-ast-utils';
+import { findBootstrapApplicationCall, getSourceFile } from './util';
+
+/** Data resolved for a bootstrapped component. */
+interface BootstrappedComponentData {
+  /** Original name of the component class. */
+  componentName: string;
+
+  /** Path under which the component was imported in the main entrypoint. */
+  componentImportPathInSameFile: string;
+
+  /** Original name of the NgModule being bootstrapped, null if the app isn't module-based. */
+  moduleName: string | null;
+
+  /**
+   * Path under which the module was imported in the main entrypoint,
+   * null if the app isn't module-based.
+   */
+  moduleImportPathInSameFile: string | null;
+}
+
+/**
+ * Finds the original name and path relative to the `main.ts` of the bootrstrapped app component.
+ * @param tree File tree in which to look for the component.
+ * @param mainFilePath Path of the `main` file.
+ */
+export function resolveBootstrappedComponentData(
+  tree: Tree,
+  mainFilePath: string,
+): BootstrappedComponentData | null {
+  // First try to resolve for a standalone app.
+  try {
+    const call = findBootstrapApplicationCall(tree, mainFilePath);
+
+    if (call.arguments.length > 0 && ts.isIdentifier(call.arguments[0])) {
+      const resolved = resolveIdentifier(call.arguments[0]);
+
+      if (resolved) {
+        return {
+          componentName: resolved.name,
+          componentImportPathInSameFile: resolved.path,
+          moduleName: null,
+          moduleImportPathInSameFile: null,
+        };
+      }
+    }
+  } catch (e) {
+    // `findBootstrapApplicationCall` will throw if it can't find the `bootrstrapApplication` call.
+    // Handle it gracefully by returning `null` instead so the consumer can recover.
+    if (!(e instanceof SchematicsException)) {
+      throw e;
+    }
+  }
+
+  // Otherwise fall back to resolving an NgModule-based app.
+  return resolveNgModuleBasedData(tree, mainFilePath);
+}
+
+/** Resolves the bootstrap data for a NgModule-based app. */
+function resolveNgModuleBasedData(
+  tree: Tree,
+  mainFilePath: string,
+): BootstrappedComponentData | null {
+  const appModulePath = getAppModulePath(tree, mainFilePath);
+  const appModuleFile = getSourceFile(tree, appModulePath);
+  const metadataNodes = getDecoratorMetadata(appModuleFile, 'NgModule', '@angular/core');
+
+  for (const node of metadataNodes) {
+    if (!ts.isObjectLiteralExpression(node)) {
+      continue;
+    }
+
+    const bootstrapProp = getMetadataField(node, 'bootstrap').find((prop) => {
+      return (
+        ts.isArrayLiteralExpression(prop.initializer) &&
+        prop.initializer.elements.length > 0 &&
+        ts.isIdentifier(prop.initializer.elements[0])
+      );
+    });
+
+    const componentIdentifier = (bootstrapProp?.initializer as ts.ArrayLiteralExpression)
+      .elements[0] as ts.Identifier | undefined;
+    const componentResult = componentIdentifier ? resolveIdentifier(componentIdentifier) : null;
+    const bootstrapCall = findBootstrapModuleCall(tree, mainFilePath);
+
+    if (
+      componentResult &&
+      bootstrapCall &&
+      bootstrapCall.arguments.length > 0 &&
+      ts.isIdentifier(bootstrapCall.arguments[0])
+    ) {
+      const moduleResult = resolveIdentifier(bootstrapCall.arguments[0]);
+
+      if (moduleResult) {
+        return {
+          componentName: componentResult.name,
+          componentImportPathInSameFile: componentResult.path,
+          moduleName: moduleResult.name,
+          moduleImportPathInSameFile: moduleResult.path,
+        };
+      }
+    }
+  }
+
+  return null;
+}
+
+/** Resolves an identifier to its original name and path that it was imported from. */
+function resolveIdentifier(identifier: ts.Identifier): { name: string; path: string } | null {
+  const sourceFile = identifier.getSourceFile();
+
+  // Try to resolve the import path by looking at the top-level named imports of the file.
+  for (const node of sourceFile.statements) {
+    if (
+      !ts.isImportDeclaration(node) ||
+      !ts.isStringLiteral(node.moduleSpecifier) ||
+      !node.importClause ||
+      !node.importClause.namedBindings ||
+      !ts.isNamedImports(node.importClause.namedBindings)
+    ) {
+      continue;
+    }
+
+    for (const element of node.importClause.namedBindings.elements) {
+      if (element.name.text === identifier.text) {
+        return {
+          // Note that we use `propertyName` if available, because it contains
+          // the real name in the case where the import is aliased.
+          name: (element.propertyName || element.name).text,
+          path: node.moduleSpecifier.text,
+        };
+      }
+    }
+  }
+
+  return null;
+}
