Angular 16运行Storybook报错：ServerOptions非泛型及AbortSignal类型冲突

问题概述 #

通过npx sb init给Angular 16项目安装Storybook后，启动时出现两类核心错误：

变量'AbortSignal'必须为类型'{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }'，但此处类型为'{ new (): AbortSignal; prototype: AbortSignal; }'
类型'ServerOptions'不是泛型类型

详细错误日志 #

Error: node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.

72 declare var AbortSignal: {
               ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:2090:13
    2090 declare var AbortSignal: {
                     ~~~~~~~~~~~
    'AbortSignal' was also declared here.

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)
Error: node_modules/webpack/types.d.ts:6157:5 - error TS2315: Type 'ServerOptions' is not generic.

6157   | ServerOptionsImport<typeof IncomingMessage>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)
Error: node_modules/webpack/types.d.ts:10934:41 - error TS2315: Type 'ServerOptions' is not generic.

10934 > = SecureContextOptions & TlsOptions & ServerOptionsImport<Request, Response>;
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)

✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes
Broken build, fix the error above.
You may need to refresh the browser.

解决方案 #

1. 修复AbortSignal类型冲突 #

该错误源于@types/node与TypeScript内置lib.dom.d.ts对AbortSignal的声明不一致，可通过以下两种方式解决：

• 指定类型依赖
  修改项目根目录tsconfig.json，在compilerOptions.types中仅保留node，避免同时加载dom类型：

  {
    "compilerOptions": {
      "types": ["node"]
    }
  }
  

• 升级@types/node版本
  安装与Angular 16兼容的最新@types/node版本：

  npm install @types/node@latest --save-dev
  

2. 修复ServerOptions泛型错误 #

该问题由webpack版本不兼容导致，Storybook安装时可能引入了与Angular 16不匹配的webpack版本，可通过以下方式解决：

• 升级Storybook到兼容版本
  执行命令更新Storybook至支持Angular 16的最新稳定版：

  npx storybook@latest upgrade
  

• 锁定webpack版本
  检查package.json中webpack版本，确保与Angular CLI使用的版本一致，随后删除依赖重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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