Angular: Use dedicated tsconfig for compodocs

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -67,10 +67,12 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
 ): BuilderOutputLike => {
   const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
+      const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
       const runCompodoc$ = options.compodoc
-        ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
-            mapTo({ tsConfig })
-          )
+        ? runCompodoc(
+            { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
+            context
+          ).pipe(mapTo({ tsConfig }))
         : of({});
 
       return runCompodoc$.pipe(mapTo({ tsConfig }));

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -67,11 +67,13 @@ export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, context) => {
   const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
+      const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+
       const runCompodoc$ = options.compodoc
         ? runCompodoc(
             {
               compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
-              tsconfig: tsConfig,
+              tsconfig: docTSConfig ?? tsConfig,
             },
             context
           ).pipe(mapTo({ tsConfig }))

code/lib/cli/src/generators/ANGULAR/helpers.ts

@@ -3,6 +3,8 @@ import { join } from 'path';
 import prompts from 'prompts';
 import dedent from 'ts-dedent';
 import { MissingAngularJsonError } from '@storybook/core-events/server-errors';
+import boxen from 'boxen';
+import { logger } from '@storybook/node-logger';
 
 export const ANGULAR_JSON_PATH = 'angular.json';
 
@@ -13,6 +15,18 @@ export const compoDocPreviewPrefix = dedent`
 `.trimStart();
 
 export const promptForCompoDocs = async (): Promise<boolean> => {
+  logger.plain(
+    // Create a text which explains the user why compodoc is necessary
+    boxen(
+      dedent`
+      Compodoc is a great tool to generate documentation for your Angular projects.
+      Storybook can use the documentation generated by Compodoc to extract argument definitions
+      and JSDOC comments to display them in the Storybook UI. We highly recommend using Compodoc for
+      your Angular projects to get the best experience out of Storybook.
+    `,
+      { title: 'Compodoc', borderStyle: 'round', padding: 1, borderColor: '#F1618C' }
+    )
+  );
   const { useCompoDoc } = await prompts({
     type: 'confirm',
     name: 'useCompoDoc',

code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}