How to configure angular storybook for ngx-translate

I'm setting up an angular 18 UI library with standalone components. While configuring this for storybook 8 and the ngx-translate package, my json translation files (en.json, fr.json...) are not found.

My solution looks like:

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


My 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 { }


The component where I use the translation pipe and import my config module. (Note the import of the translation pipe too)

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


This results in not finding my json language files. I tried to add some staticDirs: ['../public', '../static', '../src/assets'] in the main.ts file of Storybook, but that didn't work either.

Continue reading...