在 Angular + Spartacus 中找不到管道“异步”答案

【问题标题】：The pipe 'async' could not be found in Angular + Spartacus在 Angular + Spartacus 中找不到管道“异步”
【发布时间】：2021-05-06 15:25:23
【问题描述】：

如上所述，当我尝试使用 async 关键字时，我遇到了浏览器错误。我在我的自定义模块中导入 CommonModule。找不到它不工作的原因。

错误：

ERROR Error: The pipe 'async' could not be found!
    Angular 2
        getPipeDef$1
        pipe

Node: 12.19.0
OS: linux x64

Angular: 10.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.3
@angular-devkit/build-angular   0.1002.3
@angular-devkit/core            10.2.3
@angular-devkit/schematics      10.2.3
@angular/cli                    10.2.3
@schematics/angular             10.2.3
@schematics/update              0.1002.3
rxjs                            6.6.7
typescript                      4.0.7

模块

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


@NgModule({
  imports: [
    CommonModule
  ]
})
export class IngenicoPaymentMethodModule { }

我的组件

import { Component, OnInit } from '@angular/core';
import { ActiveCartService, UserIdService } from '@spartacus/core';
import { Observable } from 'rxjs';
import { PaymentMethodService, PaymentProduct } from './facade/payment-method.service';

@Component({
  selector: 'app-ingenico-payment-method',
  templateUrl: './ingenico-payment-method.component.html',
  styleUrls: ['./ingenico-payment-method.component.scss']
})
export class IngenicoPaymentMethodComponent implements OnInit {
  paymentMethods$: Observable<PaymentProduct[]>;

  constructor(
    protected paymentMethodService: PaymentMethodService,
    protected activeCartService: ActiveCartService,
    protected userIdService: UserIdService) { }

  ngOnInit(): void {
    let userId, cartId;

    this.userIdService.getUserId()
      .subscribe(occId => userId = occId)
      .unsubscribe();


    this.activeCartService.getActiveCartId().subscribe(occId => cartId = occId).unsubscribe();

    if (userId && cartId) {
      this.paymentMethods$ = this.paymentMethodService.getPaymentMethods(userId, cartId);
    }


  }

}

模板

<ng-container *ngIf="paymentMethods$ | async as paymentMethods"></ng-container>

正如您在上面看到的，我正在导入 CommonModule，但浏览器看不到它。

【问题讨论】：

你在哪个模块中定义了IngenicoPaymentMethodComponent组件？

标签： angular spartacus-storefront

【解决方案1】：

请在导入CommonModule 的同一模块中声明您的组件。只有这样async 管道才能在组件的模板中访问：

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [IngenicoPaymentMethodComponent] // <----------------
})
export class IngenicoPaymentMethodModule { }

【讨论】：

【解决方案2】：

您可以通过以下设置选择不使用 Ivy：

  "angularCompilerOptions": {
    "enableIvy": false
  }

在您的tsconfig.app.json 中，这应该可以解决您的问题。

【讨论】：

您能帮我了解退出 IVY 如何帮助解决这个问题吗？乍一看，似乎与我无关……