Канал async не найден! в Спартаке Ленивая загрузка компонентов CMS

05.07.2021Рубрика: ВопросыАвтор: admin

Я попытался сделать ленивую загрузку компонентов CMS, но получаю ошибку ниже:

ОШИБКА Ошибка: не удалось найти канал async!

Он отлично работает с 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 {
}

Пожалуйста, помогите мне это исправить.

Спасибо!.

stackoverflow .com / questions / 62246010 / — person user1606761 schedule 09.07.2021

@PalSingh Я пробовал это, но в моем случае не работает. Я заменил все стратегии обнаружения изменений на стандартные. Но все еще есть та же проблема. Пробовал после перезапуска узла. — person user1606761 schedule 09.07.2021

Post Views: 149

См. также: Проблемы с обновлением Angular CLI: обновите проект Angular вручную

1 angular angular-universal spartacus-storefront

Комментарии: 1

user1606761 16.07.2021 в 00:00
Недавно наша команда получила один запрос от клиента, который жалуется на ту же проблему.

Допустим, вы планируете отложить загрузку одного компонента CMS с именем CustomProductSummaryComponent, в 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 импортируется в функциональный модуль, при отложенной загрузке компонента CMS инфраструктура Angular не может автоматически получить требуемый CommonModule, что считается ограничением.

И решение состоит в том, чтобы вручную добавить определение модуля CustomProductImagesModule снова в файл реализации CustomProductSummaryComponent, чтобы гарантировать, что при ленивой загрузке этого компонента необходимый 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 RazerProductImagesComponent {
  ...
}


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    MediaModule,
    OutletModule,
    CarouselModule
  ],
  declarations:[CustomProductImagesComponent]
})
export class CustomProductImagesModule {}
```
Мы протестировали, и это решение может решить проблему.

С уважением, Джерри

Большое спасибо, Джерри, это решило мою проблему. — person user1606761; 16.07.2021
Ответить

Добавить комментарий