Angular 20无Zone环境下CartService转Signal时的类型错误及路由守卫失效问题求助

我刚接触Angular，之前用Angular 19的时候还是基于zone.js做变更检测的，最近升级到Angular 20切换到了zoneless模式，遇到了个棘手的问题：原来的路由守卫checkoutGuard突然失效了。我尝试把CartService里的cart改成Signal来适配zoneless的变更检测，但改完之后出现了两个类型错误，想请教下大家怎么解决，同时也想弄明白守卫失效的根本原因。

原代码（基于zone.js的版本，工作正常） #

1. Cart接口定义 #

// Cart.ts
export interface Cart {
  id: number;
  products: { productId: number }[];
}

2. CartService实现 #

@Injectable({ providedIn: 'root' })
export class CartService {
  // 本地缓存用户购物车的属性
  cart: Cart | undefined;

  addProduct(id: number): Observable<Cart> {
    const cartProduct = { productId: id, quantity: 1 };
    return defer(() => 
      !this.cart 
        ? this.httpClient.post<Cart>(this.fakeStoreCartUrl, { products: [cartProduct] }) 
        : this.httpClient.put<Cart>(`${this.fakeStoreCartUrl}/${this.cart.id}`, { 
            products: [ ...this.cart.products, cartProduct ] 
          })
    ).pipe(map(cart => this.cart = cart));
  }
}

3. 路由守卫checkoutGuard #

export const checkoutGuard: CanDeactivateFn<CartComponent> = (component, currentRoute, currentState, nextState) => {
  const dialog = inject(MatDialog);
  const cartService = inject(CartService);

  if (cartService.cart) {
    const confirmation = dialog.open(
      CheckoutComponent, 
      { data: cartService.cart.products.length }
    ).afterClosed();
    return confirmation;
  }
  return true;
};

4. 路由配置 #

export const routes: Routes = [
  // ...其他路由
  { 
    path: 'cart', 
    component: CartComponent, 
    canActivate: [authGuard], 
    canDeactivate: [checkoutGuard] 
  },
  // ...其他路由
];

在zone.js模式下，这套代码是完全正常的，但切换到zoneless之后，checkoutGuard就不再工作了。我猜测是因为原来的cart是普通属性，zoneless下变更检测不会自动追踪它的变化，所以尝试把cart改成Signal，但改造后遇到了两个类型错误。

我尝试的Signal改造及遇到的错误 #

改造后的CartService #

export class CartService {
  cart = signal<Cart | undefined>(undefined);

  addProduct(id: number): Observable<Cart> {
    const cartProduct = { productId: id, quantity: 1 };
    return defer(() => 
      // 原逻辑的!this.cart需要适配Signal
      !this.cart() 
        ? this.httpClient.post<Cart>(this.fakeStoreCartUrl, { products: [cartProduct] }) 
        : this.httpClient.put<Cart>(`${this.fakeStoreCartUrl}/${this.cart()?.id}`, { 
            products: [ 
              ...this.cart()?.products, // ❌ 类型错误
              cartProduct 
            ] 
          })
    ).pipe(
      // map操作符的返回值类型不匹配
      map(cart => this.cart.set(cart)) // ❌ 返回类型错误
    );
  }
}

改造后的checkoutGuard #

export const checkoutGuard: CanDeactivateFn<CartComponent> = (component, currentRoute, currentState, nextState) => {
  const dialog = inject(MatDialog);
  const cartService = inject(CartService);

  if (cartService.cart()) {
    const confirmation = dialog.open(
      CheckoutComponent, 
      { data: cartService.cart()?.products.length }
    ).afterClosed();
    return confirmation;
  }
  return true;
};

遇到的两个具体错误 #

1. 在...this.cart()?.products这一行，TypeScript报错：

   Type '{ productId: number; }[] | undefined' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

2. 在map(cart => this.cart.set(cart))这一行，TypeScript报错：

   Type 'Observable' is not assignable to type 'Observable'. Type 'void' is not assignable to type 'Cart'.ts(2322)

我现在卡在这里了，想请教大家：

• 这两个类型错误该怎么修复？
• 为什么zoneless模式下原来的守卫会失效？是不是因为普通属性的变更不会触发Signal的变更检测，导致守卫感知不到cart的变化？
• 有没有更合理的方式来改造整个代码，适配zoneless的变更检测机制？

内容来源于stack exchange