Having an issue: Within my angular application, I have implemented a lot of classes with inheritance. However, upon attempting to save these objects to Firebase, I encountered an error indicating that I am trying to persist custom objects which is not supported.
Below is the error message:
ERROR FirebaseError: Function DocumentReference.set() called with invalid data (via `toFirestore()`). Unsupported field value: a custom object (found in field itinerary in document trips/iLK63UGEsYpZbn2NG2N7)
at new n (http://localhost:8100/vendor.js:39963:23)
at Gu (http://localhost:8100/vendor.js:53855:16)
at t.i_ (http://localhost:8100/vendor.js:53575:16)
at Mu (http://localhost:8100/vendor.js:53808:37)
at Uu (http://localhost:8100/vendor.js:53692:50)
at http://localhost:8100/vendor.js:53792:17
at _ (http://localhost:8100/vendor.js:40153:68)
at Cu (http://localhost:8100/vendor.js:53791:56)
at Ru (http://localhost:8100/vendor.js:53616:19)
at n.set (http://localhost:8100/vendor.js:55193:40)
defaultErrorLogger @ core.js:5980
How can these objects be serialized effectively?
I have some complex objects with useful helper methods and converting my model does not seem straightforward.
Provided below is the basic structure of the model:
export class Trip {
id: string;
owner: string;
name: string;
startDate: Date;
endDate: Date | undefined;
coverImageUrl: string;
itinerary: Itinerary;
constructor() {
this.itinerary = new Itinerary();
}
}
export class Itinerary {
stats: ItineraryStats;
steps: Step[];
constructor() {
this.steps = Step[0];
this.stats = new ItineraryStats();
}
}
export class ItineraryStats {
duration: number;
driveTime: number;
driveDistance: number;
averageDriveDistancePerDay(): number {
return this.driveDistance / this.duration;
}
averageDriveTimePerDay(): number {
return this.driveTime / this.duration;
}
}
export abstract class Step {
start: Date;
end: Date;
duration: number;
enforcedStartStop: boolean;
warning: string;
}
export abstract class StopStep extends Step {
id: string;
name: string;
description: string;
pointOfInterest: PointOfInterest | null;
address: string;
coordinates: firebase.firestore.GeoPoint;
}
export class ActivityStep extends StopStep {
duration: number;
constructor() {
super();
this.id = Guid.newGuid();
}
}
export class NightStep extends StopStep {
nightNumber: number;
numberOfNight: number;
}
export class PointOfInterest {
type: PointOfInterest;
}
export class TravelStep extends Step {
Mode: TravelMode;
PolyLines: string;
}
The goal is to save a Trip object here.
I am utilizing NGXS + AngularFire, although the error persists even when solely using AngularFire. I attempted using a library(classToPlain) for TypeScript to JSON conversion but encountered issues because certain objects needed to remain as Firebase objects rather than be transformed.