Angular项目中Transloco与Storybook集成报错求助

算力阿峰

2026-7-18

解决Transloco与Storybook协作问题

针对你遇到的Transloco管道触发NG0302错误、结构指令功能无效的问题，核心原因是Transloco的管道、结构指令未在Storybook的组件上下文正确注册，可通过以下方案解决：

方案一：独立组件场景

如果SomeComponent是独立组件（带有standalone: true），直接在组件的imports数组中添加TranslocoModule，确保组件能访问到Transloco的管道和指令：

// some.component.ts
import { Component } from '@angular/core';
import { TranslocoModule } from '@ngneat/transloco';

@Component({
  selector: 'app-some',
  standalone: true,
  imports: [TranslocoModule], // 新增该行
  templateUrl: './some.component.html',
})
export class SomeComponent {
  // 组件逻辑
}

方案二：NgModule场景

如果组件在NgModule中声明，需在Story元数据里通过moduleMetadata导入TranslocoModule，同时保留原有的applicationConfig配置以加载Transloco根配置：

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

const meta: Meta<SomeComponent> = {
  component: SomeComponent,
  decorators: [
    applicationConfig({
      providers: [
        importProvidersFrom(TranslocoRootModule),
      ],
    }),
    moduleMetadata({
      imports: [TranslocoModule], // 新增该行，注册管道和指令
    }),
  ],
};

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

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