Angular中使用rtf-stream-parser的DeEncapsulate类遇继承错误求助

问题分析 #

报错Uncaught TypeError: Super expression must either be null or a function的核心原因是：rtf-stream-parser里的DeEncapsulate类继承了Node.js原生的stream.Transform，但浏览器环境不存在这个模块。你虽然安装了stream-browserify作为替代，但Angular默认的Webpack配置没有将stream模块映射到stream-browserify，导致库找不到合法的父类构造函数，从而触发继承错误。

解决方案 #

1. 配置Webpack别名替换Node核心模块 #

Angular默认不会自动替换Node.js核心模块，需要通过自定义Webpack配置指定stream的别名：

• 安装自定义Webpack构建工具：

npm install -D @angular-builders/custom-webpack

• 在项目根目录创建webpack.config.js，添加以下内容：

module.exports = {
  resolve: {
    alias: {
      'stream': 'stream-browserify'
    },
    fallback: {
      'stream': require.resolve('stream-browserify')
    }
  }
};

2. 修改Angular构建配置 #

打开angular.json，将构建和开发服务器的builder替换为自定义Webpack版本：

• 找到projects -> [你的项目名] -> architect -> build，修改配置：

"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./webpack.config.js"
  },
  // 保留其他原有配置
}

• 找到projects -> [你的项目名] -> architect -> serve，修改配置：

"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
  "customWebpackConfig": {
    "path": "./webpack.config.js"
  },
  // 保留其他原有配置
}

3. 优化Polyfill配置 #

修改polyfill.ts，简化配置（无需将整个stream挂到window对象）：

(window as any).global = window;
import { Buffer } from 'buffer';
import * as process from 'process';

(window as any).Buffer = Buffer;
(window as any).process = process;

4. 验证代码 #

重启Angular开发服务器，原组件代码即可正常运行：

import * as iconvLite from 'iconv-lite';
import { deEncapsulateSync } from 'rtf-stream-parser';

const rtf = '{\\rtf1\\ansi\\ansicpg1252\\fromtext{{{{{{hello}}}}}}}';
const result = deEncapsulateSync(rtf, { decode: iconvLite.decode });
console.log(result); // { mode: 'text', text: 'hello' }

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