找不到管道“异步”！在 Spartacus CMS 组件的延迟加载

Question

我尝试制作 CMS 组件的延迟加载， 但是出现以下错误：

ERROR 错误：找不到管道“异步”！

它适用于 CSR，但不适用于 SSR。

我的应用程序中有 Spartacus 3.2.2 和 Angular 10.2.3。

下面是我的代码示例，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomProductListGuard } from './custom-product-list.guard';

@NgModule({
  imports: [
    CommonModule,
    ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        CMSProductListComponent: {
          component: () => import('./container/custom-product-list.component').then(m => m.CustomProductListComponent),
          guards: [CustomProductListGuard]
        }
      },
    }),
  ]
})
export class CustomProductListModule {
}

请帮我解决这个问题。

谢谢！

Answer 1

最近我们的团队收到了一张客户的投诉单，他们投诉的问题完全相同。

假设您计划延迟加载一个名为 CustomProductSummaryComponent 的 CMS 组件，该组件的 html 实现中使用了异步管道。该管道在 CommonModule 中实现。

声明此组件为延迟加载的功能模块：

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    ...
  ],

  providers: [
    provideDefaultConfig(<CmsConfig>{
      cmsComponents: {
        ProductImagesComponent: {
          component: () => import('./custom-product-images.component').then(m => m.CustomProductImagesComponent)
        },
      },
    }),
  ]
})
export class CustomProductImagesModule {}

虽然CommonModule是在feature module中引入的，但是当CMS组件延迟加载时，Angular框架无法自动抓取到需要的CommonModule，这被认为是一个限制。

而解决的办法是，在CustomProductSummaryComponent的实现文件中再次手动添加CustomProductImagesModule的模块定义，以保证在延迟加载该组件时，必要的CommonModule也有机会在自己的上下文中加载。

custom-product-images.component.ts的源码：

import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-product-images',
  templateUrl: './custom-product-images.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomProductImagesComponent {
  ...
}


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    MediaModule,
    OutletModule,
    CarouselModule
  ],
  declarations:[CustomProductImagesComponent]
})
export class CustomProductImagesModule {}

我们已经测试过了，这个解决方案可以解决这个问题。

最好的问候， 杰瑞