Angular 15库中RecordRTC v5.6.2无法实例化的问题求助

问题场景 #

基于Angular 15开发类库时，使用RecordRTC v5.6.2包在服务中调用new RecordRTC()时抛出TypeError: ... is not a constructor错误，但相同代码在常规Angular项目中可正常运行。

解决方法 #

1. 调整导入方式 #

将原来的命名空间导入改为默认导入或命名导入，适配类库的模块解析规则：

方式一：默认导入

import RecordRTC from 'recordrtc';

方式二：命名导入（部分版本适用）

import { RecordRTC } from 'recordrtc';

2. 配置TypeScript支持 #

在类库的tsconfig.lib.json中，确保开启allowSyntheticDefaultImports，让TypeScript可以正确处理非ES模块风格的默认导入：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    // 其他原有配置...
  }
}

原因说明 #

Angular类库使用ng-packagr打包，其模块解析规则和常规Angular项目的webpack配置存在差异。RecordRTC v5.6.2的导出结构在类库打包环境下，命名空间导入（import * as RecordRTC from 'recordrtc'）无法正确获取到构造函数实例，从而触发类型错误。

修改后的完整服务代码 #

import { Injectable } from '@angular/core';
import RecordRTC from 'recordrtc';

@Injectable({
  providedIn: 'root'
})
export class RecorderService {
  private stream: MediaStream;
  private recorder: RecordRTC;

  constructor() { }

  public initializeRecorder(): Promise<boolean> {
    return navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    }).then(stream => {
      this.stream = stream;
      this.recorder = new RecordRTC(stream, {
        type: 'audio'
      });
      this.recorder.startRecording();
      return true;
    }).catch(err => {
      console.log('error initializing recorder ----> ', err);
      return false;
    });
  }
}

内容的提问来源于stack exchange，提问作者Matheus Carvalho