Storybook中NgRx Selector结合Async Pipe报NG02100错误求助

可能原因1：StoreModule与MockStore冲突 #

你在moduleMetadata的imports中同时导入了StoreModule.forRoot({})和使用provideMockStore，这会导致真实Store与MockStore实例冲突，AsyncPipe无法正确识别Observable类型。

解决方法：移除StoreModule.forRoot({})，因为provideMockStore已经提供了模拟的Store实例，无需再导入真实Store模块。

修改后的stories.ts导入部分：

imports: [MultiHostLandingModule, StorybookCoreModule, CommonModule]

可能原因2：Selector引用不匹配 #

确保stories中引用的selectIsLoading和组件中使用的是完全相同的selector实例，避免因导入路径错误、重复定义导致的实例不匹配。

验证方式：在stories.ts和组件中分别打印selectIsLoading.selector属性，确认两者的标识字符串一致。

可能原因3：MockStore初始化不完整 #

尝试为MockStore补充初始状态定义，确保selector能正确匹配到对应状态分支：

provideMockStore({
  initialState: {}, // 填写你项目中实际的根State结构
  selectors: [
    {
      selector: selectIsLoading,
      value: true
    }
  ]
})

可能原因4：输入属性类型不匹配 #

确认stLoadingMask输入属性的类型为boolean（而非Observable<boolean>）。虽然生产环境正常，但如果Storybook中组件的类型校验更严格，可能导致报错。

测试修改后的完整stories代码 #

export default {
  title: 'Multi Host/Multi Host Landing Page/Stories',
  component: MultiHostLandingComponent,
  decorators: [
    moduleMetadata({
      imports: [MultiHostLandingModule, StorybookCoreModule, CommonModule],
      providers: [
        apiInterceptorProvider,
        provideMockStore({
          selectors: [
            {
              selector: selectIsLoading,
              value: true
            }
          ]
        })
      ]
    })
  ]
} as Meta;

const Template: Story<MultiHostLandingComponent> = args => ({ props: { ...args } });
export const LandingWithData = Template.bind({});

内容的提问来源于stack exchange，提问作者Prasad Parab