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
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