Platform: @ngrx/entity Migration to 8 "Detected unserializable action"

[RomainWeb]

Hi team,

I have migrated to version 8 but i have trouble with a serialization. I dispatch an object with date property and i have this error. i searched on PR and issues but i didn't found some solutions.

Error
ERROR Error: Detected unserializable action at "notification.date_created" at throwIfUnserializable (http://localhost:4200/vendor.js:168370:19) at http://localhost:4200/vendor.js:168303:13 at http://localhost:4200/vendor.js:168253:27 at http://localhost:4200/vendor.js:167529:20 at computeNextEntry (http://localhost:4200/vendor.js:166435:21) at recomputeStates (http://localhost:4200/vendor.js:166488:15) at http://localhost:4200/vendor.js:166836:26 at ScanSubscriber.StoreDevtools.liftedAction$.pipe.Object.state [as accumulator] (http://localhost:4200/vendor.js:166888:38) at ScanSubscriber._tryNext (http://localhost:4200/vendor.js:190716:27) at ScanSubscriber._next (http://localhost:4200/vendor.js:190709:25)

package.json
"@ngrx/effects": "^8.0.1", "@ngrx/entity": "^8.0.1", "@ngrx/store": "^8.0.1",

Action
export const addNotification = createAction( '[Notification] Add Notification', props<{ notification: AppNotification }>() )

Reducer
on(fromActions.addNotification, (state, {notification}) => { return adapter.addOne(notification, state); }),

Model
export interface AppNotification { uuid: string; description: string; date_created: Date; type: string; icon: string; is_read: boolean; }

Can someone help me ?

[timdeschryver]

A Date is not serializable: https://ngrx.io/guide/store/configuration/runtime-checks#strictstateserializability

[RomainWeb]

oh thx for information and your quick answer

[SerkanSipahi]

@RomainWeb you can dispatch moment (https://momentjs.com/) date object. This works well :)

[stemda]

I'm facing the same issue. Unfortunately, using moment like you suggested @SerkanSipahi didn't solve the problem for me. Did I get you wrong?

start_date: Moment {_isAMomentObject: true, _i: Array(3), _isUTC: false, _pf: {…}, _locale: Locale, …}

[Zonnex]

+1, date nor moment works

[huineng]

I got on question.. when i'm using angular (8) and don't compile with aot i have this error, when i do compile with aot, i don't have these errors. So these checks only work when not using aot.

[manklu]

@huineng AFAIK they are only active in dev mode.

[timdeschryver]

Correct, the runtime checks are disabled in a production build.

[SerkanSipahi]

@stemda im using ngrx v8 and have no trouble when dispatching a moment object! @timdeschryver any thoughts?

[pcurrivan]

Huh? A Date is not serializable? Serialize with toJSON, deserialize with the constructor. Is there a reason we can't have NgRx automatically (de)serialize Dates and other objects so we don't have to manually do these conversions all throughout our app?

[leonardochaia]

A Date is not serializable: https://ngrx.io/guide/store/configuration/runtime-checks#strictstateserializability

Is this something ngrx specific? According to whom is a date not serializable?

I find it quite interesting how ngrx can assume that an object is not serializable without it knowing how I am going to serialize it.

For what I can tell, all is needed would be to add an isDate(value) to the serialization_reducer.ts
is this something that would make sense for ngrx or is it by definition that you don't want Dates being serialized? Maybe I'm missing some concepts here.

Thank you.

[amithegde]

please fix this, it's kind of let down!

[JAspeling]

It's strange, I have a simple object like this

export class ClientRegistration {
    name: string;
    email: string;
    contact: string;
    additionalContact: string;
    password: string;

    constructor(init?: Partial<ClientRegistration>) {
        Object.assign(this, init);
    }
}

and using this object in my action -

export const registerClient = createAction(
    '[Register Client] Signup',
    props<{ registration: ClientRegistration }>()
);

But it says it's unserializable? This is a perfectly serializable object...?