Angular从12升级到14后Storybook启动失败求助

报错1：ES模块加载冲突 #

报错信息：

WARN   Failed to load preset: "C:\\Users\\a.shakirov\\project\\src\\front\\project-ui-kit\\node_modules\\@storybook\\angular\\dist\\ts3.9\\server\\framework-preset-angular-ivy.js"
ERR! Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\a.shakirov\project\src\front\project-ui-kit\node_modules\@angular\compiler-cli\bundles\ngcc\index.js
ERR! require() of ES modules is not supported.
ERR! require() of C:\Users\a.shakirov\project\src\front\project-ui-kit\node_modules\@angular\compiler-cli\bundles\ngcc\index.js from C:\Users\a.shakirov\project\src\front\project-ui-kit\node_modules\@storybook\angular\dist\ts3.9\server\framework-preset-angular-ivy.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
ERR! Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\a.shakirov\project\src\front\project-ui-kit\node_modules\@angular\compiler-cli\package.json.

问题根源：Storybook 6.3.12未适配Angular 14的ESM模块结构，Angular 14将@angular/compiler-cli改为ESM格式，但旧版Storybook仍用require()加载模块，导致兼容性冲突。

报错2：Angular CLI Webpack配置缺失 #

报错信息：

ERR! => Could not get angular cli webpack config
ERR! Error: Missing required options in project target. Check "tsConfig, assets, optimization"
ERR!     at C:\Users\a.shakirov\project\src\front\project-ui-kit\node_modules\@storybook\angular\dist\ts3.9\server\angular-devkit-build-webpack.js:133:27

问题根源：旧版Storybook与Angular 14的CLI配置结构不兼容，无法正确读取项目配置中的必填字段。

解决步骤 #

1. 升级Storybook到兼容Angular 14的版本 #

Storybook 6.3.x系列不支持Angular 14，需升级到6.5.x版本（推荐6.5.16，经测试适配Angular 14）：

• 执行自动升级命令：

  npx sb upgrade --version 6.5.16
  

• 手动修改package.json中Storybook相关依赖版本后，重新安装依赖：

  npm install
  # 或 yarn install
  

2. 清理缓存与依赖 #

• 删除项目根目录下的node_modules、package-lock.json（或yarn.lock）
• 执行强制安装命令：

  npm ci
  # 或 yarn install --force
  

3. 检查并修复Angular项目配置 #

确认angular.json中项目的build target包含必填字段：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "tsConfig": "./tsconfig.app.json",
          "assets": ["src/favicon.ico", "src/assets"],
          "optimization": false // 开发环境可设为false，生产环境设为true
        }
      }
    }
  }
}

4. 重新启动Storybook #

执行启动命令：

npm run storybook
# 或 yarn storybook

内容的提问来源于stack exchange，提问作者Alexander Shakirov