fix(angular): update getComponentsInfo to filter null values (#18431)

packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap

@@ -83,3 +83,31 @@ export const Heading: Story = {
 };
 "
 `;
+
+exports[`angularStories generator: applications should ignore a path when using a routing module 1`] = `
+"import type { Meta, StoryObj } from '@storybook/angular';
+import { ComponentComponent } from './component.component';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<ComponentComponent> = {
+  component: ComponentComponent,
+  title: 'ComponentComponent',
+};
+export default meta;
+type Story = StoryObj<ComponentComponent>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/component works!/gi)).toBeTruthy();
+  },
+};
+"
+`;

packages/angular/src/generators/stories/stories-app.spec.ts

@@ -5,6 +5,7 @@ import { componentGenerator } from '../component/component';
 import { scamGenerator } from '../scam/scam';
 import { generateTestApplication } from '../utils/testing';
 import { angularStoriesGenerator } from './stories';
+import { stripIndents } from '@nx/devkit';
 
 // need to mock cypress otherwise it'll use the nx installed version from package.json
 //  which is v9 while we are testing for the new v10 version
@@ -104,6 +105,53 @@ describe('angularStories generator: applications', () => {
     ).toBeFalsy();
   });
 
+  it('should ignore a path when using a routing module', async () => {
+    tree.write(
+      `apps/${appName}/src/app/component/component.module.ts`,
+      stripIndents`
+      import { NgModule } from '@angular/core';
+      
+      @NgModule({})
+      export class ComponentModule {}
+      `
+    );
+    tree.write(
+      `apps/${appName}/src/app/component/component-routing.module.ts`,
+      stripIndents`
+      import { NgModule } from '@angular/core';
+      import { RouterModule, Routes } from '@angular/router';
+      
+      const routes: Routes = [];
+      
+      @NgModule({
+        imports: [RouterModule.forChild(routes)],
+        exports: [RouterModule],
+      })
+      export class ComponentRoutingModule {}
+      `
+    );
+    await componentGenerator(tree, {
+      name: 'component/component',
+      project: appName,
+      flat: true,
+    });
+
+    await angularStoriesGenerator(tree, {
+      name: appName,
+      ignorePaths: [`apps/${appName}/src/app/app.component.ts`],
+    });
+
+    expect(
+      tree.read(
+        `apps/${appName}/src/app/component/component.component.stories.ts`,
+        'utf-8'
+      )
+    ).toMatchSnapshot();
+    expect(
+      tree.exists(`apps/${appName}/src/app/app.component.stories.ts`)
+    ).toBeFalsy();
+  });
+
   it('should generate stories file for inline scam component', async () => {
     await scamGenerator(tree, {
       name: 'my-scam',

packages/angular/src/generators/utils/storybook-ast/component-info.ts

@@ -30,37 +30,39 @@ export function getComponentsInfo(
   moduleFilePaths: string[],
   projectName: string
 ): ComponentInfo[] {
-  return moduleFilePaths.flatMap((moduleFilePath) => {
-    const file = getTsSourceFile(tree, moduleFilePath);
-    const declaredComponents = getModuleDeclaredComponents(
-      file,
-      moduleFilePath,
-      projectName
-    );
-    if (declaredComponents.length === 0) {
-      return undefined;
-    }
-
-    if (!tsModule) {
-      tsModule = ensureTypescript();
-    }
-    const imports = file.statements.filter(
-      (statement) => statement.kind === tsModule.SyntaxKind.ImportDeclaration
-    );
-
-    const componentsInfo = declaredComponents.map((componentName) =>
-      getComponentInfo(
-        tree,
-        entryPoint,
+  return moduleFilePaths
+    .flatMap((moduleFilePath) => {
+      const file = getTsSourceFile(tree, moduleFilePath);
+      const declaredComponents = getModuleDeclaredComponents(
         file,
-        imports,
         moduleFilePath,
-        componentName
-      )
-    );
+        projectName
+      );
+      if (declaredComponents.length === 0) {
+        return undefined;
+      }
 
-    return componentsInfo;
-  });
+      if (!tsModule) {
+        tsModule = ensureTypescript();
+      }
+      const imports = file.statements.filter(
+        (statement) => statement.kind === tsModule.SyntaxKind.ImportDeclaration
+      );
+
+      const componentsInfo = declaredComponents.map((componentName) =>
+        getComponentInfo(
+          tree,
+          entryPoint,
+          file,
+          imports,
+          moduleFilePath,
+          componentName
+        )
+      );
+
+      return componentsInfo;
+    })
+    .filter((f) => f !== undefined);
 }
 
 export function getStandaloneComponentsInfo(