Angular14+Storybook6.5.13：装饰器与preview-head.html失效求助

一、解决applyDecorators was not supported :( !错误 #

这个错误源于Storybook 6.5.x与Angular 14的兼容性冲突，加上模块构造函数的逻辑触发了框架不支持的操作，按以下步骤修复：

1. 重构StorybookModule的初始化逻辑 #

Storybook编译stories时不会实例化NgModule，模块构造函数中的代码会触发异常。将CartService的初始化逻辑移到工厂提供者中：

修改StorybookModule的providers配置：

providers: [
  { provide: ApiService, useClass: ApiMockService },
  { provide: AuthService, useClass: AuthMockService },
  { provide: UserService, useClass: UserMockService },
  // 替换原构造函数中的CartService初始化逻辑
  {
    provide: CartService,
    useFactory: () => {
      const cartService = new CartService();
      cartService.setCartData(MOCKED_CART_DATA, "fake-id");
      console.warn("Storybook module imported. This module should be used only by storybook isolate module!");
      return cartService;
    }
  }
],

然后删除StorybookModule的构造函数：

// 移除这段代码
constructor(private _cart: CartService) {
  // ...原构造函数逻辑
}

2. 升级Storybook到兼容Angular 14的补丁版本 #

Storybook 6.5.13对Angular 14的兼容性存在缺陷，升级到同分支的最新补丁版（如6.5.16）：

npm install @storybook/angular@6.5.16 @storybook/core@6.5.16 --save-dev

二、修复preview-head.html不生效问题 #

Storybook 6.5.x与Angular 14的构建流程变化导致preview-head.html的脚本执行时机或路径出现问题，按以下方案调整：

1. 替换preview-head.html的脚本导入 #

将hammerjs的导入移到preview.ts中，避免依赖iframe的onload事件：

// preview.ts顶部添加
import 'hammerjs';

2. 全局添加body类（替代preview-head中的DOM操作） #

在preview.ts末尾添加DOM操作代码，确保在Storybook初始化时执行：

// preview.ts末尾添加
if (typeof document !== 'undefined') {
  document.body.classList.add('xyz', 'mat-typography');
}

3. 验证preview-head.html的路径配置 #

确保preview-head.html放在.storybook目录下，同时检查main.js（或main.ts）中没有覆盖默认配置：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  // 确保没有自定义previewHead覆盖默认文件
  // previewHead: (head) => `${head}`,
};

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