From d9af817d603f21af499ec24283b4c94fbf565c55 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 7 Apr 2025 09:27:23 +0200 Subject: [PATCH] fix(@schematics/angular): infer app component name and path in server schematic 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. --- .../app/app.module.server.ts.template | 8 +- .../standalone-src/main.server.ts.template | 4 +- .../app/app.module.server.ts.template | 8 +- .../standalone-src/main.server.ts.template | 4 +- packages/schematics/angular/server/index.ts | 15 ++ .../schematics/angular/server/index_spec.ts | 120 ++++++++++++++ .../schematics/angular/utility/ast-utils.ts | 10 +- .../utility/standalone/app_component.ts | 148 ++++++++++++++++++ 8 files changed, 298 insertions(+), 19 deletions(-) create mode 100644 packages/schematics/angular/utility/standalone/app_component.ts 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 index bd711d72954a..5ffb915ae45c 100644 --- 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 index 154ce1c8fd43..bc0b6ba59758 100644 --- 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 index 38689aa6c3ff..eeffba7f902b 100644 --- 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 index 154ce1c8fd43..bc0b6ba59758 100644 --- 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 index 1f8ccd7e85aa..a8baccf0d503 100644 --- 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 index 316fdfa17557..a4bacc3f17bb 100644 --- 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 index a39261868f50..106481688d18 100644 --- 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 new file mode 100644 index 000000000000..28b436c737c6 --- /dev/null +++ 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. + // Catch so we can continue to the fallback logic. + 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; +}