Clone error when passing an object in the route of angular

Question

I am trying to pass objects in my angular project instead of separate fields. But i am receiving a "Error: Uncaught (in promise): DataCloneError: The object could not be cloned." :(

This is the code:

 var errorJsonNav: NavigationExtras = {state:{errorJson:ErrorJsonDTO}};
 this.router.navigate(['error'], errorJsonNav);

This is the DTO:

export class ErrorJsonDTO {
  excepcionProducida: boolean;
  errorDescripcion: string;
  codigoIncidencia: string;
  correcto: boolean;
  falloSistema:boolean;
  horaActual: string;
  mensajeBase: string;

}

And this the data of the example:

The fields are very simple, some strings and some booleans. Why i have a clone problem? :(

Regards

Answer 1

Thank to the guide of ritesh i make the solution.

The component sender must code this:

var errorJsonNav: NavigationExtras = {state:{errorJson:errorJson}};
this.router.navigate(['error'], errorJsonNav);

So the error, in the first line, was in the state part. State must have a key-value format. Isnt necesary to indicate the type of the object i am sending.

In the component receiver is good the original code:

var navigation = this.router.getCurrentNavigation();
var state = navigation?.extras.state as {errorJson:ErrorJsonDTO};
this.errorJson = state.errorJson;