StoryBook Angular执行npm run storybook报错: Could not get angular cli webpack config

云原生阿岚

2026-10-5

执行npm run storybook命令运行失败，抛出错误：

ERR! => Could not get angular cli webpack config

解决方案

检查版本兼容性
Angular与Storybook存在严格的版本匹配规则：Angular 14及以上版本需搭配Storybook 6.5+使用，Angular 16及以上版本需搭配Storybook 7.x及以上版本使用。版本不匹配时可执行npx storybook@latest upgrade将Storybook升级到最新兼容版本。
检查依赖完整性
确认项目已安装Angular适配Storybook的必要依赖，缺失时执行对应安装命令：
```
npm install @storybook/angular @angular-devkit/build-angular --save-dev
```
修正Storybook配置格式
打开项目根目录下.storybook/main.js文件，确认framework字段格式符合当前使用的Storybook版本要求。Storybook 7.x及以上版本需使用对象格式配置，示例如下：
```
module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: {
    name: "@storybook/angular",
    options: {}
  }
}
```
高版本中已废弃framework: "@storybook/angular"的字符串写法，使用旧写法会触发配置读取失败。
验证Angular项目配置
打开项目根目录angular.json文件，确认当前激活的项目配置下architect.build段配置完整，builder字段使用Angular官方支持的构建器（如@angular-devkit/build-angular:browser、@angular-devkit/build-angular:application），无必填配置项缺失。
自定义webpack配置适配
若项目使用了自定义Angular webpack配置，需在Storybook framework配置的options中添加angularCliWebpackConfig字段，指定自定义配置文件的相对路径即可。