Spartacus 4.0.0报错：Property 'BEFORE'不存在于类型'OutletPosition'

报错原因 #

这个TS报错是Spartacus 4.x版本OutletPosition枚举的使用问题，触发原因有两个：

1. 若你直接在模板中引用枚举，没有在组件类中把枚举暴露为公共属性，模板无法识别枚举成员
2. Spartacus 4.x对OutletPosition的枚举定义有调整，错误写法中的全大写BEFORE不是该版本枚举的合法成员

解决方案 #

方案1：直接传字符串字面量（最简便） #

cxOutletPos本身支持直接传入合法的位置字符串，不需要引入枚举，直接修改模板代码即可：

<ng-template cxOutletRef="SiteLogo" [cxOutletPos]="'before'" let-model>

合法的字符串取值为before、after、replace，分别对应在原组件前插入、后插入、替换原组件三个场景。

方案2：正确使用枚举写法 #

如果你希望通过枚举类型做类型校验，按以下步骤修改：

1. 在custom-header.component.ts中从正确的包导入OutletPosition，并将其暴露为组件的公共属性：

import { Component } from '@angular/core';
import { OutletPosition } from '@spartacus/storefront'; // 必须从@spartacus/storefront导入

@Component({
  selector: 'app-custom-header',
  templateUrl: './custom-header.component.html'
})
export class CustomHeaderComponent {
  // 暴露枚举给模板使用
  public readonly outletPosition = OutletPosition;
}

2. 修改模板代码，使用枚举对应的合法属性：

<ng-template cxOutletRef="SiteLogo" [cxOutletPos]="outletPosition.BEFORE" let-model>

如果仍提示BEFORE不存在，可以在TS代码中打印OutletPosition确认当前版本的枚举成员名，部分迭代版本的Spartacus 4.x会使用全小写的键名。

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