TypeScript报错Cannot find module 'fs' 安装@types/node后仍未解决怎么办

根本原因 #

fs是Node.js原生服务端模块，仅可在Node.js运行环境中调用。Angular默认编译产物运行在浏览器端，浏览器无文件系统底层API实现，因此即使安装了@types/node类型定义，也会出现识别异常。 #

对应解决方案 #

场景1：fs仅用于编译构建阶段逻辑（如自定义构建脚本、预打包静态资源） #

• 修改tsconfig.json的compilerOptions配置，新增types字段显式引入Node类型声明：

{
  "compilerOptions": {
    // 保留原有其他配置
    "types": ["node"]
  }
}

• Angular 13及以上版本需额外修改angular.json，在对应构建配置的options下添加allowedCommonJsDependencies配置：

{
  "architect": {
    "build": {
      "options": {
        // 保留原有其他配置
        "allowedCommonJsDependencies": ["fs"]
      }
    }
  }
}

注意：该场景下fs的调用逻辑仅可放在构建脚本、Node.js执行的初始化阶段，不能写入组件、服务等浏览器运行的业务代码中。

场景2：fs写在浏览器端业务代码中（如你当前写在drops-map.component.ts组件内的情况） #

该场景下不可直接使用fs，需根据实际需求替换实现方案：

• 若要读取项目内置静态资源：将资源放入assets目录，通过HttpClient发起请求读取，示例代码：

import { HttpClient } from '@angular/common/http';

@Component({
  // 组件配置
})
export class DropsMapComponent {
  constructor(private http: HttpClient) {}

  readFile() {
    this.http.get('/assets/目标文件.json').subscribe(content => {
      // 处理读取到的内容
    })
  }
}

• 若要读取用户本地选择的文件：使用浏览器原生FileReaderAPI实现即可。

内容的提问来源于stack exchange，提问作者Cristóbal Felipe Fica Urzúa