Angular18独立组件库配置Storybook8与ngx-translate时翻译文件找不到

问题核心 #

问题源于两个关键环节：

• Storybook的staticDirs路径配置错误，导致无法托管翻译文件所在的assets目录
• 独立组件环境下，ngx-translate的HTTP加载器存在路径或依赖缺失问题

解决方案 #

1. 修正Storybook静态资源路径 #

根据你的项目结构，调整.storybook/main.ts中的staticDirs配置，确保指向正确的assets目录：

情况1：.storybook在项目根目录（与projects文件夹同级）

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../projects/my-angular-library/src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: { name: '@storybook/angular', options: {} },
  // 正确指向组件库的assets目录
  staticDirs: ['../projects/my-angular-library/src/assets']
};

export default config;

情况2：.storybook在组件库内部（projects/my-angular-library/.storybook）

// projects/my-angular-library/.storybook/main.ts
import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: { name: '@storybook/angular', options: {} },
  // 相对路径指向assets
  staticDirs: ['../src/assets']
};

export default config;

2. 在Storybook Preview中补充必要依赖 #

独立组件需要显式提供HttpClient和翻译模块依赖，修改.storybook/preview.ts：

// .storybook/preview.ts
import { applicationConfig } from '@storybook/angular';
import { provideHttpClient } from '@angular/common/http';
import { TranslateModuleConfig } from '../projects/my-angular-library/src/lib/translate-config.module';
import { importProvidersFrom } from '@angular/core';

export const preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    applicationConfig({
      providers: [
        provideHttpClient(), // 提供HttpClient依赖
        importProvidersFrom(TranslateModuleConfig) // 导入翻译配置模块
      ]
    })
  ]
};

3. 优化独立组件的导入逻辑 #

组件中无需单独导入TranslatePipe，TranslateModuleConfig已导出包含TranslatePipe的TranslateModule：

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule, TranslateModuleConfig], // 移除TranslatePipe
  template: `<div>{{ 'greeting' | translate }}</div>`,
})
export class MyComponent { ... }

可选：改用静态加载翻译文件（更稳定） #

避免HTTP路径问题，直接导入JSON文件作为翻译源，修改translate-config.module.ts：

import { NgModule } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
// 直接导入翻译文件
import en from '../assets/i18n/en.json';
import fr from '../assets/i18n/fr.json';

// 静态加载器，无需HttpClient
export function StaticTranslateLoader() {
  return {
    getTranslation: (lang: string) => {
      switch (lang) {
        case 'fr':
          return Promise.resolve(fr);
        default:
          return Promise.resolve(en);
      }
    }
  };
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: StaticTranslateLoader
      },
      defaultLanguage: 'en'
    })
  ],
  exports: [TranslateModule]
})
export class TranslateModuleConfig {}

内容的提问来源于stack exchange，提问作者Kurt Van den Branden