angularstorybookangular-storybooktransloco

Transloco in Storybook throws "No provider for InjectionToken TRANSLOCO_TRANSPILER"


Transloco doesn't seem to work with Storybook anymore. I created a new clean repo with Angular, Transloco and Storybook on latest version and I always get the error:

NG0302: The pipe 'transloco' could not be found in the 'SomeComponent' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302

And without using the pipe (using <ng-container *transloco="let t">) it doesnt work as well but throws no error.

Story:

import type {Meta, StoryObj} from '@storybook/angular';
import {SomeComponent} from '../app/some/some.component';
import {applicationConfig} from '@storybook/angular';
import {TranslocoRootModule} from '../app/transloco-root.module';
import {importProvidersFrom} from '@angular/core';

const meta: Meta<SomeComponent> = {
  component: SomeComponent,
  decorators: [
    applicationConfig({
      providers: [
        importProvidersFrom(TranslocoRootModule),
      ],
    }),
  ],
};

export default meta;
type Story = StoryObj<SomeComponent>;

export const Some: Story = {
  render: () => ({
    props: {
      label: 'SomeComponent',
      primary: true,
    },
  }),
};

Does anyone has an idea?

Minimal reproduction repo: https://github.com/MickL/transloco-issues


Solution

  • Storybook now uses standalone components and because of this, application-wide providers have to be registered differently in comparison to how they would be with NgModules. A detailed explanation can be found on Github: https://github.com/storybookjs/storybook/issues/23130#issuecomment-1598282651