如何为 ngx-translate 配置 Angular Storybook

Question

我正在设置一个带有独立组件的 Angular 18 UI 库。在为 Storybook 8 和 ngx-translate 包配置此功能时，找不到我的 json 翻译文件（en.json、fr.json...）。

我的解决方案如下：

projects/
  └── my-angular-library/
    ├── src/
    │   ├── lib/
    │   ├── assets/
    │   │   └── i18n/
    │   │       ├── en.json
    │   │       ├── fr.json
    │   │       └── ...
    │   └── public-api.ts
    └── ...

我的translate-config.module.ts

import { NgModule } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}

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

我使用翻译管道并导入配置模块的组件。 （还要注意翻译管道的导入）

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

这会导致找不到我的 json 语言文件。我尝试在 Storybook 的

staticDirs: ['../public', '../static', '../src/assets']

文件中添加一些

main.ts

，但这也不起作用。

Answer 1

似乎您也需要更改您的

angular.json

文件。在 angular.json 文件中，确保在库的构建配置中包含资产文件夹：

"projects": {
  "my-angular-library": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "projects/my-angular-library/src/assets"
          ]
        }
      }
    }
  }
}