NX+Storybook环境下Angular项目stories文件TypeScript编译缺失问题及配置咨询

Hey there! Let's work through your Storybook + NX setup problems together—you're almost there with a single Storybook instance managing all your stories.

1. Fixing Storybook to handle stories from both apps and libs #

The root cause of your TypeScript compilation error is incorrect relative paths in your root .storybook config files. Let's adjust those first, then make sure the rest of the setup is aligned:

Step 1: Correct the stories path in root .storybook/main.js

Your current path ../../../libs/**/*.stories.ts is wrong because your root .storybook folder lives at the same level as apps and libs. Update it to include both libs and apps:

module.exports = {
  stories: [
    '../libs/**/*.stories.ts', // Correct path to libs stories
    '../apps/**/*.stories.ts'  // Add this to include app stories
  ],
  addons: ['@storybook/addon-essentials'],
  // Keep your webpackFinal comment if you need it later
};

Step 2: Fix the TypeScript include paths in root .storybook/tsconfig.json

Again, the ../../../libs path is invalid here. Replace it with the correct relative paths to apps and libs:

{
  "extends": "../tsconfig.base.json",
  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"], // Simplified exclude list
  "include": [
    "../apps/**/*",
    "../libs/**/*",
    "./**/*" // Include Storybook's own config files
  ]
}

Step 3: Verify your tsconfig.base.json

Make sure your root tsconfig.base.json (in the project root) includes all your source files—this is usually set up by default in NX, but double-check:

{
  "compilerOptions": { /* ... your existing options ... */ },
  "include": [
    "apps/**/*",
    "libs/**/*",
    "tools/**/*"
  ],
  "exclude": [
    "node_modules",
    "tmp"
  ]
}

Step 4: Check the app-level Storybook config

Your apps/myproject/.storybook/main.js looks good because it inherits the root config and adds app-specific stories. Just ensure that if you run Storybook from the root (not the app), it picks up all stories correctly. To run the root Storybook instance, use the NX command:

nx run myproject:storybook

2. Understanding why Webpack might be required (and avoiding unnecessary dependencies) #

You're right that you shouldn't need to manually install Webpack when using NX + Storybook—here's what's happening:

• Your apps/myproject/.storybook/main.js sets core: { ...rootMain.core, builder: 'webpack5' }. Storybook 6.4 uses Webpack 4 by default, so switching to Webpack 5 requires additional builders that might not be included in the base NX Storybook setup.
• If you don't specifically need Webpack 5 features (like better module federation or performance improvements), remove the builder: 'webpack5' line from your app-level main.js. This will revert to the default Webpack 4 setup, which is fully supported by NX's @nrwl/storybook package without needing extra dependencies.

If you do need Webpack 5, you don't have to install Webpack directly—instead, install the official Storybook Webpack 5 builders that are compatible with NX:

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

But only do this if you have a specific use case for Webpack 5; otherwise, sticking with the default setup keeps your dependencies lean.

After making these changes, restart your Storybook server and the compilation error should disappear—you'll have a single instance managing all stories from apps and libs.

内容的提问来源于stack exchange，提问作者Manuel Kobloch