Spartacus自定义段落组件编译报错及依赖注入问题排查

你在编译自定义段落组件时遇到了类型不匹配和依赖注入两个关联问题，我来帮你一步步拆解解决：

一、TS2769：async管道类型不匹配错误 #

问题根源 #

你在模板里给cmsComponent用了async管道，但async管道只接受Observable或Promise类型的值，而你组件里定义的cmsComponent是CmsParagraphComponent类型——CmsComponentData实例本身并不是Observable，它的data$属性才是用来获取组件数据的Observable对象。

修复步骤 #

1. 调整组件代码，移除多余的cmsComponent属性，直接使用注入的component实例的data$：

export class NewParaComponent {
  cartPromotion$: Observable<PromotionResult[]> = this.promotionService.getOrderPromotionsFromCart();
  // 删除这行无效定义：cmsComponent: CmsParagraphComponent;
  
  constructor(
    protected promotionService: PromotionService, 
    public component: CmsComponentData<CmsParagraphComponent>, 
    public cmsService: CmsService
  ) { }
}

2. 修改模板，把cmsComponent替换为component.data$，配合async管道使用：

<p *ngIf="(component.data$ | async) as data" [innerHTML]="data.content"></p>

二、NullInjectorError：缺少CmsComponentData提供者 #

问题根源 #

这个错误是因为Spartacus的CmsComponentData依赖需要由CMS组件工厂自动提供，但你的模块可能缺少必要的Spartacus模块导入，导致依赖无法被正确注入。

修复步骤 #

1. 确保你的custom-page.module.ts中导入了Spartacus的CmsModule和StorefrontModule，并正确完成组件注册：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NewParaComponent } from './new-para/new-para.component';
import { ConfigModule, CmsModule } from '@spartacus/core';
import { StorefrontModule } from '@spartacus/storefront';

@NgModule({
  declarations: [NewParaComponent],
  imports: [
    CommonModule,
    CmsModule, // 必须导入此模块才能自动提供CmsComponentData依赖
    StorefrontModule,
    ConfigModule.withConfig({
      cmsComponents: {
        CMSParagraphComponent: {
          component: NewParaComponent,
        }
      }
    })
  ]
})
export class CustomPageModule { }

2. 注意：不要直接在模板中手动使用<app-new-para></app-new-para>，这种方式不会触发Spartacus的CMS组件工厂，也就无法自动提供CmsComponentData，必须通过CMS配置让Spartacus渲染这个组件。

验证修复 #

修改完成后重新编译项目，两个错误应该都会消失：

• async管道现在作用于正确的Observable类型值，类型匹配问题解决
• CmsComponentData由Spartacus模块正确注入，依赖错误修复

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