Serialization error: markup required

I am encountering an unexpected error while using JointJS in an Angular application. After I create graph, paper and a rectangle like in the following:

private graph: joint.dia.Graph;
private paper: joint.dia.Paper;

 ngOnInit() {
   this.graph = new joint.dia.Graph();
   this.paper = new joint.dia.Paper({
     el: this.paperElement.nativeElement,
     width: 1001,
     height: 801,
     model: this.graph,
     gridSize: 20,
     drawGrid: { name: "mesh" }
   });
   let rect = new joint.shapes.standard.Rectangle();
   rect.position(50, 20);
   rect.resize(100, 40);
   rect.attr({
     body: {
       fill: "blue"
     },
     label: {
       text: "abc",
       fill: "white"
     }
   });
   rect.addTo(this.graph);

I am trying to serialize the graph to JSON and load it again, like so

    let data = this.graph.toJSON();
    console.log(JSON.stringify(data));
    this.graph.fromJSON(data);

But when i try to run the application, i get the following error:

Error: dia.ElementView: markup required

The serialized json looks like the following: {"cells":[{"type":"standard.Rectangle","position":{"x":50,"y":20},"size":{"width":100,"height":40},"angle":0,"id":"64a15c16-2145-4fcb-b838-5271d69d4fa7","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"abc"}}}]}

Am i doing something wrong or is this a bug?

[kumilingus]

If there is no global joint variable, you need to pass the shapes namespace explicitly to graph (for models) and paper (for views).

const namespace = joint.shapes; // e.g. { standard: { Rectangle: RectangleElementClass }}
const graph = new joint.dia.Graph({ /* attributes of the graph */ }, { cellNamespace: namespace });
const paper = new joint.dia.Paper({ cellViewNamespace: namespace });

[kumilingus]

@thomaspeugeot , the size of the resulting bundle.

// This would import all JointJS shapes.
// And there would be no way to import the graph only.
import * from 'src/dia/graph.mjs';