Storybook で ngx-translate を使用する方法

概要

Storybook で ngx-translate を使用する方法

環境

• NX: 12.10.0
• Angular: 12.10.0
• Storybook: 12.10.1

参考情報

• ngx-translate integration

実装

apps/app/.storybook/i18n.module.ts

import { NgModule } from "@angular/core";
import {
  TranslateModule,
  TranslateLoader,
  TranslateService,
} from "@ngx-translate/core";
import { of } from "rxjs";

const staticTranslateLoader: TranslateLoader = {
  getTranslation(lang: string) {
    return of(require(`../src/assets/i18n/${lang}.json`));
  },
};

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useValue: staticTranslateLoader,
      },
    }),
  ],
})
export class I18nModule {
  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang("ja");
    this.translate.use("ja");
  }
}

apps/app/src/app/hoge.component.stories.ts

import { moduleMetadata, Story, Meta } from "@storybook/angular";
import { HogeComponent } from "./hoge.component";
import { I18nModule } from "../../.storybook/i18n.module";

export default {
  title: "HogeComponent",
  component: HogeComponent,
  decorators: [
    moduleMetadata({
      imports: [I18nModule],
    }),
  ],
} as Meta<HogeComponent>;

const Template: Story<HogeComponent> = (args: HogeComponent) => ({
  component: HogeComponent,
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {};