在Angular库中集成@clientio/rappid第三方库出现undefined错误

我有一个包含主应用的Angular工作区，工作区中还有一个Angular库，该Angular库需要使用第三方库JointJS+（代码中包名为@clientio/rappid）。

主应用的app.module.ts中加载了LazyModule，LazyModule里引入了我的Angular库AngularLibraryModule，我尝试在AngularLibraryModule中实现JointJS的官方示例。

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 }); // 错误发生在此处

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

        ...

}

执行ng serve启动主应用时构建成功，但在浏览器中打开时出现错误（错误截图：）。

为何会出现该错误？我已按JointJS教程完成所有步骤，且确认Angular库创建正确，无法理解为何@clientio/rappid库未被正确导入。

这个错误的核心是Angular库的依赖配置与懒加载场景下的依赖传递问题，具体原因和解决步骤如下：

核心原因 #

1. Angular库未声明依赖：你的Angular库使用了@clientio/rappid，但未在库的package.json中明确声明该依赖。Angular库构建时不会自动打包第三方依赖，必须明确配置依赖关系。
2. 懒加载模块的依赖传递失效：LazyModule作为懒加载模块，其依赖的Angular库未正确传递@clientio/rappid，导致浏览器在组件初始化时找不到对应代码。

解决步骤 #

1. 配置Angular库的依赖
   打开Angular库目录下的package.json，根据需求添加依赖：

   • 若希望库自带依赖（不推荐，易重复打包）：

     "dependencies": {
       "@clientio/rappid": "你的版本号"
     }
     

   • 若希望由主应用提供依赖（推荐）：

     "peerDependencies": {
       "@clientio/rappid": "你的版本号"
     }
     

2. 确保主应用安装依赖
   在主应用根目录执行命令：

   npm install @clientio/rappid
   

3. 导入JointJS+样式文件
   JointJS+需要加载对应的CSS，可在Angular库组件中导入：
   修改angular-library.component.ts的styles数组：

   styles: [
     '@clientio/rappid/dist/rappid.css'
   ]
   

4. 检查懒加载配置
   确保主应用路由中LazyModule的懒加载配置（如loadChildren）正确，无阻止依赖传递的特殊设置。

内容的提问来源于stack exchange，提问作者Martijn van den Bergh