0

I tried to make Lazy Loading of CMS Components, But am getting below error:

ERROR Error: The pipe 'async' could not be found!

It works fine with CSR, but with SSR it is not working.

I have Spartacus 3.2.2 and Angular 10.2.3 in my application.

Below is my code sample,

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

Please help me to fix this.

Thanks!.

user1606761
  • 105
  • 11
  • https://stackoverflow.com/questions/62246010/angular-rxjs-pipe-async-does-not-work-with-ssr – Pal Singh Jul 09 '21 at 03:47
  • @PalSingh I tried this, but not works in my case. I replaced all change detection strategy to default. But still have same issue. Tried after restarting node. – user1606761 Jul 09 '21 at 06:31

1 Answers1

2

recently our team have received one ticket from customer who complains exactly the same issue.

Let's say you plan to lazy load one CMS component named CustomProductSummaryComponent in whose html implementation, async pipe is utilized. This pipe is implemented in CommonModule.

The feature module which declares this component to be lazy loaded:

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

Although CommonModule is imported in feature module, when the CMS component is lazy loaded, Angular framework fails to grab the required CommonModule automatically, which is considered a limitation.

And the solution is, to manually add the module definition of CustomProductImagesModule again in CustomProductSummaryComponent's implementation file, to ensure that when this component is lazy loaded, the necessary CommonModule has chance to be loaded as well in its own context.

The source code of 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 {}

We have tested and this solution can fix the issue.

Best regards, Jerry

i042416
  • 356
  • 1
  • 3