升级Angular 14后Storybook构建失败：Digest method not supported错误

错误信息 #

99% done plugins webpack-hot-middlewarewebpack built preview c4fd3adfedabce8e8e4b in 28712ms
WARN Force closed manager build
ModuleBuildError: Module build failed (from /node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Digest method not supported
at /node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
at processResult (/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:701:19)
at /node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:807:5
at /node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /node_modules/@ngtools/webpack/src/ivy/loader.js:81:9
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Digest method not supported

当前依赖版本 #

"@angular-devkit/build-angular": "14.2.0",
"@angular-eslint/eslint-plugin": "14.0.0",
"@angular-eslint/eslint-plugin-template": "14.0.0",
"@angular-eslint/template-parser": "14.0.0",
"@angular/cli": "~14.2.0",
"@angular/compiler-cli": "14.2.0",
"@angular/language-service": "14.2.0",
"@storybook/angular": "6.5.11",
"@storybook/builder-webpack5": "6.5.11",
"@storybook/manager-webpack5": "6.5.11",

解决方法 #

1. 检查并升级Node.js版本 #

Angular 14要求Node.js版本为14.15.0+ 或 16.x.x，若使用Node.js 12及以下版本，会因crypto模块的digest方法兼容性问题触发该错误。建议升级到Node.js 16 LTS版本，升级后执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install
npm run storybook

2. 升级Storybook到兼容版本 #

Storybook 6.5.11与Angular 14的适配存在已知问题，可升级到6.5.x系列的最新版本（如6.5.16）：

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

升级完成后重新构建Storybook。

3. 修复依赖冲突 #

删除现有依赖缓存和锁定文件，重新安装以确保版本一致性：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

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