fix(router): properly parse json response in the FormAction

apps/analog-app/src/app/pages/cart.page.ts

@@ -2,12 +2,15 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { RouterLinkWithHref } from '@angular/router';
+import { FormAction } from '@analogjs/router';
 
 import { CartService } from '../cart.service';
 
+import { type CartSubmitResponse } from './cart.server';
+
 @Component({
   selector: 'app-cart',
-  imports: [RouterLinkWithHref, CurrencyPipe, ReactiveFormsModule],
+  imports: [RouterLinkWithHref, CurrencyPipe, ReactiveFormsModule, FormAction],
   template: `
     <h3>Cart</h3>
 
@@ -16,14 +19,17 @@ import { CartService } from '../cart.service';
     </p>
 
     @for (item of items; track $index) {
-
-    <div class="cart-item">
-      <span>{{ item.name }} </span>
-      <span>{{ item.price | currency }}</span>
-    </div>
+      <div class="cart-item">
+        <span>{{ item.name }} </span>
+        <span>{{ item.price | currency }}</span>
+      </div>
     }
 
-    <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
+    <form
+      method="post"
+      [formGroup]="checkoutForm"
+      (onSuccess)="onSuccess($any($event))"
+    >
       <div>
         <label for="name"> Name </label>
         <input id="name" type="text" formControlName="name" />
@@ -49,10 +55,10 @@ export default class CartComponent {
     address: '',
   });
 
-  onSubmit(): void {
+  onSuccess(res: CartSubmitResponse): void {
     // Process checkout data here
     this.items = this.cartService.clearCart();
-    console.warn('Your order has been submitted', this.checkoutForm.value);
+    console.warn(res.message, this.checkoutForm.value);
     this.checkoutForm.reset();
   }
 }

apps/analog-app/src/app/pages/cart.server.ts

@@ -0,0 +1,13 @@
+import { type PageServerAction, json } from '@analogjs/router/server/actions';
+
+export type CartSubmitResponse = {
+  type: 'success';
+  message: string;
+};
+
+export async function action({ event }: PageServerAction) {
+  return json<CartSubmitResponse>({
+    type: 'success',
+    message: 'Your order has been submitted',
+  });
+}

packages/router/src/lib/form-action.directive.ts

@@ -61,7 +61,7 @@ export class FormAction {
             const redirectUrl = new URL(res.url).pathname;
             this.state.emit('redirect');
             this.router.navigate([redirectUrl]);
-          } else if (res.headers.get('Content-type') === 'application/json') {
+          } else if (this._isJSON(res.headers.get('Content-type'))) {
             res.json().then((result) => {
               this.onSuccess.emit(result);
               this.state.emit('success');
@@ -95,4 +95,11 @@ export class FormAction {
 
     return `/api/_analog/pages${window.location.pathname}`;
   }
+
+  private _isJSON(contentType: string | null): boolean {
+    const mime = contentType ? contentType.split(';') : [];
+    const essence = mime[0];
+
+    return essence === 'application/json';
+  }
 }