Implementing a third party library in an Angular Library gives 'undefined' errors

Question

The situation:

I have an Angular workspace with a main app. This workspace also has an Angular library. This Angular library uses a third party library, JointJS+ (called @clientio/rappid in the code).

In my main app i have an app.module.ts which loads another module called LazyModule. In that LazyModule i load my Angular Library called AngularLibraryModule. In this AngularLibraryModule I try to implement the example from their website

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LazyModule } from './lazy/lazy.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        LazyModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

lazy.module.ts:

import { ComponentFactoryResolver, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy/lazy.component';
import { AngularLibraryModule } from 'projects/angular-library/src/public-api';



@NgModule({
    declarations: [
        LazyComponent
    ],
    imports: [
        CommonModule,
        AngularLibraryModule
    ],
    exports: [
        LazyComponent
    ]
})
export class LazyModule {
    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

    getComponent() {
        return this.componentFactoryResolver.resolveComponentFactory(
            LazyComponent
        );
    }

}

angular-library.module.ts:

import { NgModule } from '@angular/core';
import { AngularLibraryComponent } from './angular-library.component';



@NgModule({
  declarations: [
    AngularLibraryComponent
  ],
  imports: [
  ],
  exports: [
    AngularLibraryComponent
  ]
})
export class AngularLibraryModule { }

angular-library.component.ts:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { dia, ui, shapes } from '@clientio/rappid';

@Component({
    selector: 'lib-angular-library',
    template: `
    <p>
      angular-library works!
      we need to load jointjs library here
    </p>
    <div class="canvas" #canvas></div>

  `,
    styles: [
    ]
})
export class AngularLibraryComponent implements OnInit {

    @ViewChild('canvas') canvas: ElementRef;

    private graph: dia.Graph;
    private paper: dia.Paper;
    private scroller: ui.PaperScroller;

    public ngOnInit(): void {
        const graph = this.graph = new dia.Graph({}, { cellNamespace: shapes }); // here is where my error happens

        const paper = this.paper = new dia.Paper({
            model: graph,
            background: {
                color: '#F8F9FA',
            },
            frozen: true,
            async: true,
            sorting: dia.Paper.sorting.APPROX,
            cellViewNamespace: shapes
        });

        ...

}

The problem:

When I ng serve this project (the main app) it will build. However if i open this in the browser i get the following error message:

My question:

Why is this error happening? I think I did all the correct steps from the JointJS tutorial and i am also sure that i created my Angular Library correctly. I really don't understand why he would not import the JointJS+ (in the code it is called @clientio/rappid) library correctly