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.

Author: crisbeto

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;

packages/schematics/angular/server/index.ts

@@ -27,7 +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 { getMainFilePath } from '../utility/standalone/util';
+import { findBootstrappedComponent, getMainFilePath } from '../utility/standalone/util';
 import { getWorkspace, updateWorkspace } from '../utility/workspace';
 import { Builders } from '../utility/workspace-models';
 import { Schema as ServerOptions } from './schema';
@@ -187,10 +187,16 @@ export default function (options: ServerOptions): Rule {
     let filesUrl = `./files/${usingApplicationBuilder ? 'application-builder/' : 'server-builder/'}`;
     filesUrl += isStandalone ? 'standalone-src' : 'ngmodule-src';
 
+    const bootstrappedComponent = findBootstrappedComponent(host, browserEntryPoint) || {
+      name: 'App',
+      importPathWithinMain: './app/app',
+    };
     const templateSource = apply(url(filesUrl), [
       applyTemplates({
         ...strings,
         ...options,
+        appComponentName: bootstrappedComponent.name,
+        appComponentPath: bootstrappedComponent.importPathWithinMain,
       }),
       move(sourceRoot),
     ]);

packages/schematics/angular/server/index_spec.ts

@@ -127,6 +127,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';

packages/schematics/angular/utility/standalone/util.ts

@@ -81,6 +81,68 @@ export function findBootstrapApplicationCall(tree: Tree, mainFilePath: string):
   throw new SchematicsException(`Could not find bootstrapApplication call in ${mainFilePath}`);
 }
 
+/**
+ * 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 findBootstrappedComponent(
+  tree: Tree,
+  mainFilePath: string,
+): {
+  name: string;
+  importPathWithinMain: string;
+} | null {
+  let bootstrapCall: ts.CallExpression | null = null;
+
+  try {
+    bootstrapCall = findBootstrapApplicationCall(tree, mainFilePath);
+  } 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;
+    }
+  }
+
+  if (
+    bootstrapCall === null ||
+    bootstrapCall.arguments.length < 1 ||
+    !ts.isIdentifier(bootstrapCall.arguments[0])
+  ) {
+    return null;
+  }
+
+  const name = bootstrapCall.arguments[0].text;
+  const sourceFile = bootstrapCall.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 === name) {
+        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,
+          importPathWithinMain: node.moduleSpecifier.text,
+        };
+      }
+    }
+  }
+
+  return null;
+}
+
 /**
  * Finds the local name of an imported symbol. Could be the symbol name itself or its alias.
  * @param sourceFile File within which to search for the import.