Angular: Fix runCompodoc for Windows, local Compodoc, and user specified tsconfig

app/angular/src/builders/build-storybook/index.spec.ts

@@ -11,6 +11,7 @@ const cpSpawnMock = {
   spawn: jest.fn(),
 };
 jest.doMock('child_process', () => cpSpawnMock);
+
 describe('Build Storybook Builder', () => {
   let architect: Architect;
   let architectHost: TestingArchitectHost;
@@ -142,14 +143,15 @@ describe('Build Storybook Builder', () => {
     await run.stop();
 
     expect(output.success).toBeTruthy();
-    expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
-      '-p',
-      './storybook/tsconfig.ts',
-      '-d',
-      '',
-      '-e',
-      'json',
-    ]);
+    expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
+      'npx',
+      ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
+      {
+        cwd: '',
+        env: process.env,
+        shell: true,
+      }
+    );
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),

app/angular/src/builders/start-storybook/index.spec.ts

@@ -154,14 +154,15 @@ describe('Start Storybook Builder', () => {
     await run.stop();
 
     expect(output.success).toBeTruthy();
-    expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
-      '-p',
-      './storybook/tsconfig.ts',
-      '-d',
-      '',
-      '-e',
-      'json',
-    ]);
+    expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
+      'npx',
+      ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
+      {
+        cwd: '',
+        env: process.env,
+        shell: true,
+      }
+    );
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),

app/angular/src/builders/utils/run-compodoc.spec.ts

@@ -0,0 +1,88 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { LoggerApi } from '@angular-devkit/core/src/logger';
+import { take } from 'rxjs/operators';
+
+const cpSpawnMock = {
+  spawn: jest.fn(),
+};
+jest.doMock('child_process', () => cpSpawnMock);
+
+const { runCompodoc } = require('./run-compodoc');
+
+const builderContextLoggerMock: LoggerApi = {
+  createChild: jest.fn(),
+  log: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+  fatal: jest.fn(),
+};
+
+describe('runCompodoc', () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    process.env = { FOO: 'bar' };
+    cpSpawnMock.spawn.mockImplementation(() => ({
+      stdout: { on: () => {} },
+      stderr: { on: () => {} },
+      on: (_event: string, cb: any) => cb(0),
+    }));
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+    jest.clearAllMocks();
+  });
+
+  it('should run compodoc with tsconfig from context', async () => {
+    runCompodoc(
+      {
+        compodocArgs: [],
+        tsconfig: 'path/to/tsconfig.json',
+      },
+      {
+        workspaceRoot: 'path/to/project',
+        logger: builderContextLoggerMock,
+      } as BuilderContext
+    )
+      .pipe(take(1))
+      .subscribe();
+
+    expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
+      'npx',
+      ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
+      {
+        cwd: 'path/to/project',
+        env: { FOO: 'bar' },
+        shell: true,
+      }
+    );
+  });
+
+  it('should run compodoc with tsconfig from compodocArgs', async () => {
+    runCompodoc(
+      {
+        compodocArgs: ['-p', 'path/to/tsconfig.stories.json'],
+        tsconfig: 'path/to/tsconfig.json',
+      },
+      {
+        workspaceRoot: 'path/to/project',
+        logger: builderContextLoggerMock,
+      } as BuilderContext
+    )
+      .pipe(take(1))
+      .subscribe();
+
+    expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
+      'npx',
+      ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
+      {
+        cwd: 'path/to/project',
+        env: { FOO: 'bar' },
+        shell: true,
+      }
+    );
+  });
+});

app/angular/src/builders/utils/run-compodoc.ts

@@ -2,22 +2,29 @@ import { BuilderContext } from '@angular-devkit/architect';
 import { spawn } from 'child_process';
 import { Observable } from 'rxjs';
 
+const hasTsConfigArg = (args: string[]) => args.indexOf('-p') !== -1;
+
 export const runCompodoc = (
   { compodocArgs, tsconfig }: { compodocArgs: string[]; tsconfig: string },
   context: BuilderContext
 ): Observable<void> => {
   return new Observable<void>((observer) => {
     const finalCompodocArgs = [
+      'compodoc',
       // Default options
-      '-p',
-      tsconfig,
+      ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsconfig]),
       '-d',
       `${context.workspaceRoot}`,
       ...compodocArgs,
     ];
 
     try {
-      const child = spawn('compodoc', finalCompodocArgs);
+      context.logger.info(finalCompodocArgs.join(' '));
+      const child = spawn('npx', finalCompodocArgs, {
+        cwd: context.workspaceRoot,
+        env: process.env,
+        shell: true,
+      });
 
       child.stdout.on('data', (data) => {
         context.logger.info(data.toString());

app/angular/src/server/framework-preset-angular-cli.ts

@@ -172,7 +172,9 @@ async function getLegacyDefaultBuildOptions(options: PresetOptions) {
       browserTarget.target
     );
 
-    logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`);
+    logger.info(
+      `=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`
+    );
     return { ...target.options };
   } catch (error) {
     logger.error(`=> Could not find angular project: ${error.message}`);

examples/angular-cli/angular.json

@@ -79,15 +79,13 @@
           "builder": "@storybook/angular:start-storybook",
           "options": {
             "browserTarget": "angular-cli:build",
-            "port": 4400,
-            "staticDir": ["src/assets"]
+            "port": 4400
           }
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
           "options": {
-            "browserTarget": "angular-cli:build",
-            "staticDir": ["src/assets"]
+            "browserTarget": "angular-cli:build"
           }
         }
       }

examples/angular-cli/package.json

@@ -38,7 +38,7 @@
     "@angular/cli": "^11.2.13",
     "@angular/compiler-cli": "^11.2.14",
     "@angular/elements": "^11.2.14",
-    "@compodoc/compodoc": "^1.1.14",
+    "@compodoc/compodoc": "^1.1.15",
     "@storybook/addon-a11y": "6.5.0-alpha.5",
     "@storybook/addon-actions": "6.5.0-alpha.5",
     "@storybook/addon-backgrounds": "6.5.0-alpha.5",

lib/core-server/src/build-dev.ts

@@ -100,11 +100,13 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
   if (options.smokeTest) {
     // @ts-ignore
     const managerWarnings = (managerStats && managerStats.toJson().warnings) || [];
-    if (managerWarnings.length > 0) logger.warn(`manager: ${JSON.stringify(managerWarnings, null, 2)}`);
+    if (managerWarnings.length > 0)
+      logger.warn(`manager: ${JSON.stringify(managerWarnings, null, 2)}`);
     // I'm a little reticent to import webpack types in this file :shrug:
     // @ts-ignore
     const previewWarnings = (previewStats && previewStats.toJson().warnings) || [];
-    if (previewWarnings.length > 0) logger.warn(`preview: ${JSON.stringify(previewWarnings, null, 2)}`);
+    if (previewWarnings.length > 0)
+      logger.warn(`preview: ${JSON.stringify(previewWarnings, null, 2)}`);
     process.exit(
       managerWarnings.length > 0 || (previewWarnings.length > 0 && !options.ignorePreview) ? 1 : 0
     );