Angular: Support storybook configuration for projects with only angular Library

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

@@ -55,7 +55,7 @@ describe('Build Storybook Builder', () => {
     jest.clearAllMocks();
   });
 
-  it('should work', async () => {
+  it('should start storybook with angularBrowserTarget', async () => {
     const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
       browserTarget: 'angular-cli:build-2',
       compodoc: false,
@@ -69,7 +69,6 @@ describe('Build Storybook Builder', () => {
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
-      browserTarget: 'angular-cli:build-2',
       configDir: '.storybook',
       docsMode: false,
       loglevel: undefined,
@@ -79,6 +78,34 @@ describe('Build Storybook Builder', () => {
       mode: 'static',
       compodoc: false,
       compodocArgs: ['-e', 'json'],
+      tsConfig: 'src/tsconfig.app.json',
+    });
+  });
+
+  it('should start storybook with tsConfig', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+      tsConfig: 'path/to/tsConfig.json',
+      compodoc: false,
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
+    expect(buildStandaloneMock).toHaveBeenCalledWith({
+      angularBrowserTarget: null,
+      configDir: '.storybook',
+      docsMode: false,
+      loglevel: undefined,
+      quiet: false,
+      outputDir: 'storybook-static',
+      staticDir: [],
+      mode: 'static',
+      compodoc: false,
+      compodocArgs: ['-e', 'json'],
+      tsConfig: 'path/to/tsConfig.json',
     });
   });
 
@@ -102,7 +129,6 @@ describe('Build Storybook Builder', () => {
     ]);
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
-      browserTarget: 'angular-cli:build-2',
       configDir: '.storybook',
       docsMode: false,
       loglevel: undefined,
@@ -112,6 +138,7 @@ describe('Build Storybook Builder', () => {
       mode: 'static',
       compodoc: true,
       compodocArgs: ['-e', 'json'],
+      tsConfig: 'src/tsconfig.app.json',
     });
   });
 });

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

@@ -3,19 +3,21 @@ import {
   BuilderOutput,
   createBuilder,
   targetFromTargetString,
+  Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { from, Observable, of } from 'rxjs';
 import { CLIOptions } from '@storybook/core-common';
-import { map, switchMap } from 'rxjs/operators';
+import { map, switchMap, mapTo } from 'rxjs/operators';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { runCompodoc } from '../utils/run-compodoc';
 
 export type StorybookBuilderOptions = JsonObject & {
-  browserTarget: string;
+  browserTarget?: string | null;
+  tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
 } & Pick<
@@ -33,18 +35,24 @@ function commandBuilder(
   context: BuilderContext
 ): Observable<StorybookBuilderOutput> {
   return from(setup(options, context)).pipe(
-    switchMap(({ browserOptions }) =>
-      options.compodoc
-        ? runCompodoc(
-            { compodocArgs: options.compodocArgs, tsconfig: browserOptions.tsConfig },
-            context
+    switchMap(({ tsConfig }) => {
+      const runCompodoc$ = options.compodoc
+        ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
+            mapTo({ tsConfig })
           )
-        : of({})
-    ),
-    map(() => ({
-      ...options,
-      angularBrowserTarget: options.browserTarget,
-    })),
+        : of({});
+
+      return runCompodoc$.pipe(mapTo({ tsConfig }));
+    }),
+    map(({ tsConfig }) => {
+      const { browserTarget, ...otherOptions } = options;
+
+      return {
+        ...otherOptions,
+        angularBrowserTarget: browserTarget,
+        tsConfig,
+      };
+    }),
     switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
     map(() => {
       return { success: true };
@@ -53,15 +61,19 @@ function commandBuilder(
 }
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
-  const browserTarget = targetFromTargetString(options.browserTarget);
-  const browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
-    await context.getTargetOptions(browserTarget),
-    await context.getBuilderNameForTarget(browserTarget)
-  );
+  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+  let browserTarget: Target | undefined;
+
+  if (options.browserTarget) {
+    browserTarget = targetFromTargetString(options.browserTarget);
+    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+      await context.getTargetOptions(browserTarget),
+      await context.getBuilderNameForTarget(browserTarget)
+    );
+  }
 
   return {
-    browserOptions,
-    browserTarget,
+    tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined,
   };
 }
 

app/angular/src/builders/build-storybook/schema.json

@@ -7,7 +7,12 @@
     "browserTarget": {
       "type": "string",
       "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
+      "default": null
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The full path for the TypeScript configuration file, relative to the current workspace."
     },
     "staticDir": {
       "type": "array",
@@ -56,5 +61,12 @@
     }
   },
   "additionalProperties": false,
-  "required": ["browserTarget"]
+  "oneOf": [
+    {
+      "required": ["browserTarget"]
+    },
+    {
+      "required": ["tsConfig"]
+    }
+  ]
 }

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

@@ -55,7 +55,7 @@ describe('Start Storybook Builder', () => {
     jest.clearAllMocks();
   });
 
-  it('should work', async () => {
+  it('should start storybook with angularBrowserTarget', async () => {
     const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
       browserTarget: 'angular-cli:build-2',
       port: 4400,
@@ -70,7 +70,6 @@ describe('Start Storybook Builder', () => {
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
-      browserTarget: 'angular-cli:build-2',
       ci: false,
       configDir: '.storybook',
       docsMode: false,
@@ -85,6 +84,40 @@ describe('Start Storybook Builder', () => {
       staticDir: [],
       compodoc: false,
       compodocArgs: ['-e', 'json'],
+      tsConfig: 'src/tsconfig.app.json',
+    });
+  });
+
+  it('should start storybook with tsConfig', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+      tsConfig: 'path/to/tsConfig.json',
+      port: 4400,
+      compodoc: false,
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
+    expect(buildStandaloneMock).toHaveBeenCalledWith({
+      angularBrowserTarget: null,
+      ci: false,
+      configDir: '.storybook',
+      docsMode: false,
+      host: 'localhost',
+      https: false,
+      port: 4400,
+      quiet: false,
+      smokeTest: false,
+      sslCa: undefined,
+      sslCert: undefined,
+      sslKey: undefined,
+      staticDir: [],
+      compodoc: false,
+      compodocArgs: ['-e', 'json'],
+      tsConfig: 'path/to/tsConfig.json',
     });
   });
 
@@ -108,7 +141,6 @@ describe('Start Storybook Builder', () => {
     ]);
     expect(buildStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
-      browserTarget: 'angular-cli:build-2',
       ci: false,
       configDir: '.storybook',
       docsMode: false,
@@ -123,6 +155,7 @@ describe('Start Storybook Builder', () => {
       staticDir: [],
       compodoc: true,
       compodocArgs: ['-e', 'json'],
+      tsConfig: 'src/tsconfig.app.json',
     });
   });
 });

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

@@ -3,19 +3,21 @@ import {
   BuilderOutput,
   createBuilder,
   targetFromTargetString,
+  Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { from, Observable, of } from 'rxjs';
 import { CLIOptions } from '@storybook/core-common';
-import { map, switchMap } from 'rxjs/operators';
+import { map, switchMap, mapTo } from 'rxjs/operators';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import { runCompodoc } from '../utils/run-compodoc';
 
 export type StorybookBuilderOptions = JsonObject & {
-  browserTarget: string;
+  browserTarget?: string | null;
+  tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
 } & Pick<
@@ -44,18 +46,24 @@ function commandBuilder(
   context: BuilderContext
 ): Observable<StorybookBuilderOutput> {
   return from(setup(options, context)).pipe(
-    switchMap(({ browserOptions }) =>
-      options.compodoc
-        ? runCompodoc(
-            { compodocArgs: options.compodocArgs, tsconfig: browserOptions.tsConfig },
-            context
+    switchMap(({ tsConfig }) => {
+      const runCompodoc$ = options.compodoc
+        ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
+            mapTo({ tsConfig })
           )
-        : of({})
-    ),
-    map(() => ({
-      ...options,
-      angularBrowserTarget: options.browserTarget,
-    })),
+        : of({});
+
+      return runCompodoc$.pipe(mapTo({ tsConfig }));
+    }),
+    map(({ tsConfig }) => {
+      const { browserTarget, ...otherOptions } = options;
+
+      return {
+        ...otherOptions,
+        angularBrowserTarget: browserTarget,
+        tsConfig,
+      };
+    }),
     switchMap((standaloneOptions) => runInstance(standaloneOptions)),
     map(() => {
       return { success: true };
@@ -64,15 +72,19 @@ function commandBuilder(
 }
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
-  const browserTarget = targetFromTargetString(options.browserTarget);
-  const browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
-    await context.getTargetOptions(browserTarget),
-    await context.getBuilderNameForTarget(browserTarget)
-  );
+  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+  let browserTarget: Target | undefined;
+
+  if (options.browserTarget) {
+    browserTarget = targetFromTargetString(options.browserTarget);
+    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+      await context.getTargetOptions(browserTarget),
+      await context.getBuilderNameForTarget(browserTarget)
+    );
+  }
 
   return {
-    browserOptions,
-    browserTarget,
+    tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined,
   };
 }
 

app/angular/src/builders/start-storybook/schema.json

@@ -7,7 +7,12 @@
     "browserTarget": {
       "type": "string",
       "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
-      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
+      "default": null
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The full path for the TypeScript configuration file, relative to the current workspace."
     },
     "port": {
       "type": "number",
@@ -83,5 +88,12 @@
     }
   },
   "additionalProperties": false,
-  "required": ["browserTarget"]
+  "oneOf": [
+    {
+      "required": ["browserTarget"]
+    },
+    {
+      "required": ["tsConfig"]
+    }
+  ]
 }