0
# Framework Configuration
1

2
Framework-specific configuration options and Storybook main configuration utilities for Angular projects.
3

4
## Capabilities
5

6
### StorybookConfig Interface
7

8
Main configuration interface for Storybook Angular projects, extending base Storybook configuration with Angular-specific options.
9

10
```typescript { .api }
11
/**
12
 * The interface for Storybook configuration in `main.ts` files for Angular projects
13
 */
14
interface StorybookConfig extends Omit<
15
  StorybookConfigBase,
16
  keyof StorybookConfigWebpack | keyof StorybookConfigFramework
17
>, StorybookConfigWebpack, StorybookConfigFramework {
18
  framework: '@storybook/angular' | {
19
    name: '@storybook/angular';
20
    options: FrameworkOptions;
21
  };
22
}
23

24
interface StorybookConfigFramework {
25
  framework:
26
    | '@storybook/angular'
27
    | {
28
        name: '@storybook/angular';
29
        options: FrameworkOptions;
30
      };
31
  core?: StorybookConfigBase['core'] & {
32
    builder?:
33
      | '@storybook/builder-webpack5'
34
      | {
35
          name: '@storybook/builder-webpack5';
36
          options: BuilderOptions;
37
        };
38
  };
39
  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
40
    StorybookConfigBase['typescript'];
41
}
42
```
43

44
**Basic Configuration Example:**
45

46
```typescript
47
// .storybook/main.ts
48
import type { StorybookConfig } from '@storybook/angular';
49

50
const config: StorybookConfig = {
51
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
52
  addons: [
53
    '@storybook/addon-links',
54
    '@storybook/addon-essentials',
55
    '@storybook/addon-interactions',
56
  ],
57
  framework: '@storybook/angular',
58
  typescript: {
59
    check: false,
60
    reactDocgen: 'react-docgen-typescript',
61
    reactDocgenTypescriptOptions: {
62
      shouldExtractLiteralValuesFromEnum: true,
63
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
64
    },
65
  },
66
};
67

68
export default config;
69
```
70

71
### FrameworkOptions Interface
72

73
Angular-specific framework configuration options.
74

75
```typescript { .api }
76
/**
77
 * Options for configuring the Angular framework integration
78
 */
79
interface FrameworkOptions extends AngularOptions {
80
  /** Builder-specific options for webpack5 */
81
  builder?: BuilderOptions;
82
}
83

84
interface AngularOptions {
85
  /** Enable Angular Ivy renderer (default: true in Angular 12+) */
86
  enableIvy?: boolean;
87
}
88
```
89

90
**Configuration with Framework Options:**
91

92
```typescript
93
// .storybook/main.ts
94
import type { StorybookConfig } from '@storybook/angular';
95

96
const config: StorybookConfig = {
97
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
98
  addons: ['@storybook/addon-essentials'],
99
  framework: {
100
    name: '@storybook/angular',
101
    options: {
102
      enableIvy: true,
103
      builder: {
104
        useSWC: true,
105
      },
106
    },
107
  },
108
  core: {
109
    builder: {
110
      name: '@storybook/builder-webpack5',
111
      options: {
112
        fsCache: true,
113
        lazyCompilation: true,
114
      },
115
    },
116
  },
117
};
118

119
export default config;
120
```
121

122
### defineMain Helper Function
123

124
Utility function for defining Storybook main configuration with type safety.
125

126
```typescript { .api }
127
/**
128
 * Helper function for defining main configuration with type safety
129
 * @param config - Storybook configuration object
130
 * @returns Typed configuration object
131
 */
132
declare function defineMain(config: StorybookConfig): StorybookConfig;
133
```
134

135
**Usage Example:**
136

137
```typescript
138
// .storybook/main.ts
139
import { defineMain } from '@storybook/angular/node';
140

141
export default defineMain({
142
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
143
  addons: [
144
    '@storybook/addon-links',
145
    '@storybook/addon-essentials',
146
    '@storybook/addon-interactions',
147
  ],
148
  framework: '@storybook/angular',
149
  typescript: {
150
    check: false,
151
  },
152
  // Full type safety and IntelliSense support
153
});
154
```
155

156
## Configuration Examples
157

158
### Basic Angular Project
159

160
Minimal configuration for a standard Angular project:
161

162
```typescript
163
import type { StorybookConfig } from '@storybook/angular';
164

165
const config: StorybookConfig = {
166
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
167
  addons: [
168
    '@storybook/addon-links',
169
    '@storybook/addon-essentials',
170
  ],
171
  framework: '@storybook/angular',
172
};
173

174
export default config;
175
```
176

177
### Angular with Material Design
178

179
Configuration for projects using Angular Material:
180

181
```typescript
182
import type { StorybookConfig } from '@storybook/angular';
183

184
const config: StorybookConfig = {
185
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
186
  addons: [
187
    '@storybook/addon-links',
188
    '@storybook/addon-essentials',
189
    '@storybook/addon-docs',
190
  ],
191
  framework: '@storybook/angular',
192
  staticDirs: ['../src/assets'],
193
  webpackFinal: async (config) => {
194
    // Custom webpack configuration for Angular Material
195
    config.module.rules.push({
196
      test: /\.scss$/,
197
      use: ['style-loader', 'css-loader', 'sass-loader'],
198
    });
199
    return config;
200
  },
201
};
202

203
export default config;
204
```
205

206
### Angular with Custom Webpack Configuration
207

208
Advanced webpack customization:
209

210
```typescript
211
import type { StorybookConfig } from '@storybook/angular';
212
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
213

214
const config: StorybookConfig = {
215
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
216
  addons: [
217
    '@storybook/addon-essentials',
218
    '@storybook/addon-interactions',
219
  ],
220
  framework: {
221
    name: '@storybook/angular',
222
    options: {
223
      builder: {
224
        useSWC: true,
225
      },
226
    },
227
  },
228
  core: {
229
    builder: {
230
      name: '@storybook/builder-webpack5',
231
      options: {
232
        fsCache: true,
233
        lazyCompilation: true,
234
      },
235
    },
236
  },
237
  webpackFinal: async (config) => {
238
    // Add TypeScript path mapping
239
    config.resolve.plugins = [
240
      ...(config.resolve.plugins || []),
241
      new TsconfigPathsPlugin({
242
        configFile: path.resolve(__dirname, '../tsconfig.json'),
243
      }),
244
    ];
245

246
    // Handle Angular specific loaders
247
    config.module.rules.push({
248
      test: /\.html$/,
249
      loader: 'html-loader',
250
      options: {
251
        minimize: true,
252
      },
253
    });
254

255
    return config;
256
  },
257
};
258

259
export default config;
260
```
261

262
### Monorepo Configuration
263

264
Configuration for Angular monorepo (Nx, Lerna, etc.):
265

266
```typescript
267
import type { StorybookConfig } from '@storybook/angular';
268
import { join, dirname } from 'path';
269

270
function getAbsolutePath(value: string): any {
271
  return dirname(require.resolve(join(value, 'package.json')));
272
}
273

274
const config: StorybookConfig = {
275
  stories: [
276
    '../../../libs/**/*.stories.@(js|jsx|ts|tsx|mdx)',
277
    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
278
  ],
279
  addons: [
280
    getAbsolutePath('@storybook/addon-links'),
281
    getAbsolutePath('@storybook/addon-essentials'),
282
    getAbsolutePath('@storybook/addon-interactions'),
283
  ],
284
  framework: {
285
    name: getAbsolutePath('@storybook/angular'),
286
    options: {},
287
  },
288
  typescript: {
289
    check: false,
290
    reactDocgen: 'react-docgen-typescript',
291
    reactDocgenTypescriptOptions: {
292
      shouldExtractLiteralValuesFromEnum: true,
293
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
294
    },
295
  },
296
};
297

298
export default config;
299
```
300

301
### Performance Optimized Configuration
302

303
Configuration optimized for large Angular projects:
304

305
```typescript
306
import type { StorybookConfig } from '@storybook/angular';
307

308
const config: StorybookConfig = {
309
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
310
  addons: [
311
    '@storybook/addon-essentials',
312
    {
313
      name: '@storybook/addon-docs',
314
      options: {
315
        transcludeMarkdown: true,
316
      },
317
    },
318
  ],
319
  framework: {
320
    name: '@storybook/angular',
321
    options: {
322
      enableIvy: true,
323
      builder: {
324
        useSWC: true,
325
        fsCache: true,
326
      },
327
    },
328
  },
329
  core: {
330
    builder: {
331
      name: '@storybook/builder-webpack5',
332
      options: {
333
        fsCache: true,
334
        lazyCompilation: true,
335
      },
336
    },
337
    disableTelemetry: true,
338
  },
339
  typescript: {
340
    check: false, // Disable type checking for faster builds
341
    reactDocgen: false, // Disable docgen for faster builds
342
  },
343
  features: {
344
    storyStoreV7: true,
345
    argTypeTargetsV7: true,
346
  },
347
};
348

349
export default config;
350
```
351

352
## TypeScript Configuration
353

354
### Angular-Specific TypeScript Options
355

356
```typescript
357
interface AngularTypeScriptConfig {
358
  typescript?: {
359
    /** Enable/disable TypeScript type checking */
360
    check?: boolean;
361
    /** Skip TypeScript compilation in favor of Angular's compiler */
362
    skipCompiler?: boolean;
363
    /** React docgen configuration (inherited from webpack builder) */
364
    reactDocgen?: 'react-docgen-typescript' | 'react-docgen' | false;
365
    /** Options for react-docgen-typescript */
366
    reactDocgenTypescriptOptions?: {
367
      shouldExtractLiteralValuesFromEnum?: boolean;
368
      propFilter?: (prop: any) => boolean;
369
    };
370
  };
371
}
372
```
373

374
**TypeScript Configuration Example:**
375

376
```typescript
377
const config: StorybookConfig = {
378
  // ... other options
379
  typescript: {
380
    check: true,
381
    skipCompiler: false,
382
    reactDocgen: 'react-docgen-typescript',
383
    reactDocgenTypescriptOptions: {
384
      shouldExtractLiteralValuesFromEnum: true,
385
      propFilter: (prop) => {
386
        if (prop.parent) {
387
          return !/node_modules/.test(prop.parent.fileName);
388
        }
389
        return true;
390
      },
391
    },
392
  },
393
};
394
```
395

396
## Preset Configuration
397

398
The Angular framework automatically includes necessary presets:
399

400
```typescript
401
// Automatically included presets:
402
const presets = [
403
  require.resolve('./server/framework-preset-angular-cli'),
404
  require.resolve('./server/framework-preset-angular-ivy'),
405
];
406
```
407

408
### Preview Annotations
409

410
Automatic preview configuration:
411

412
```typescript
413
// Automatically configured preview annotations:
414
const previewAnnotations = [
415
  '@storybook/angular/dist/client/config.mjs',
416
  // Conditionally added based on options:
417
  '@storybook/angular/dist/client/preview-prod.mjs', // if enableProdMode
418
  '@storybook/angular/dist/client/docs/config.mjs', // if docs enabled
419
];
420
```
421

422
## Environment-Specific Configuration
423

424
### Development Configuration
425

426
```typescript
427
const config: StorybookConfig = {
428
  // ... base config
429
  core: {
430
    builder: {
431
      name: '@storybook/builder-webpack5',
432
      options: {
433
        lazyCompilation: true,
434
        fsCache: true,
435
      },
436
    },
437
  },
438
  typescript: {
439
    check: true, // Enable checking in dev
440
  },
441
};
442
```
443

444
### Production/CI Configuration
445

446
```typescript
447
const config: StorybookConfig = {
448
  // ... base config
449
  core: {
450
    disableTelemetry: true,
451
    builder: {
452
      name: '@storybook/builder-webpack5',
453
      options: {
454
        fsCache: false, // Disable for reproducible builds
455
      },
456
    },
457
  },
458
  typescript: {
459
    check: false, // Disable checking for faster CI builds
460
  },
461
};
462
```