Angular/TS中使用gitrows库遇构造函数及模块缺失问题求助

问题1：Gitrows is not a constructor 错误 #

这个问题源于gitrows的导出结构在ES模块环境下的适配问题，调整引入和实例化方式即可解决：

1. （可选）优化decs.d.ts类型定义，让它更贴合库的实际结构，获得更好的类型提示：

declare module 'gitrows' {
  class Gitrows {
    constructor(options?: Record<string, any>);
    // 可根据实际使用需求添加方法类型，比如read、write等
    read(params: Record<string, any>): Promise<any>;
  }
  const Gitrows: typeof Gitrows;
  export default Gitrows;
}

2. 调整组件中的引入与实例化代码：

import Gitrows from 'gitrows';

@Component({...})
export class YourComponent implements OnInit {
  ngOnInit(): void {
    const gr = new Gitrows();
    // 后续调用gr.read()等方法即可
  }
}

如果仍报错，可检查node_modules/gitrows/lib/index.js的导出逻辑：若库是通过module.exports = Gitrows导出的CommonJS模块，ES模块环境下需调整为：

import * as GitrowsModule from 'gitrows';

// ...
const gr = new GitrowsModule.default();

问题2：webpack 5 缺少stream polyfill 错误 #

Angular项目需通过自定义webpack配置添加fallback设置：

方案1：添加stream polyfill（推荐，确保库功能完整） #

1. 安装依赖：

npm install stream-browserify --save-dev
npm install @angular-builders/custom-webpack --save-dev

2. 项目根目录创建webpack.config.js：

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

3. 修改angular.json的构建配置：
   找到architect -> build和architect -> serve节点，替换builder并添加自定义配置：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有outputPath、index、main等配置
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
}

4. 重启Angular开发服务器即可生效。

方案2：禁用stream polyfill（确认库无需该功能时使用） #

直接修改webpack.config.js：

module.exports = {
  resolve: {
    fallback: {
      "stream": false
    }
  }
};

后续步骤同方案1的3、4。

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