Angular/TypeScript读取文件报错：无法解析'fs'模块求助

这个错误的核心原因是：fs是Node.js专属的文件系统API，前端浏览器环境不支持；如果是Node.js项目则可能是构建工具配置错误，把代码按前端环境打包了。以下分场景给出解决方法：

场景1：你在前端项目（React/Vue/纯前端）中开发 #

浏览器出于安全限制，不允许直接访问本地文件系统，因此fs模块完全无法在前端环境使用。你需要换一种方式加载单词列表：

方法A：通过HTTP请求加载静态文件 #

1. 将words.txt放到项目的静态资源目录（比如React的public文件夹、Vue的public文件夹）
2. 用fetch请求文件内容：

async function loadWordList() {
  const res = await fetch('/words.txt');
  const wordsText = await res.text();
  const wordsArray = wordsText.split('\n').filter(word => word.trim()); // 按行分割并过滤空行
  console.log(wordsArray);
}
loadWordList();

方法B：将单词列表转为JS模块 #

1. 创建wordList.js文件：

export const wordList = [
  "apple",
  "grape",
  "bread",
  // 你的所有单词...
];

2. 在业务代码中直接导入：

import { wordList } from './wordList.js';
console.log(wordList);

场景2：你在Node.js后端项目中开发 #

如果是Node.js项目却出现这个错误，大概率是Webpack/Vite等构建工具默认按前端环境打包，需要修改配置明确告知这是Node.js环境：

Webpack配置修改 #

在webpack.config.js中添加target: 'node'：

module.exports = {
  target: 'node', // 关键：告诉Webpack打包Node.js环境代码
  // 其他原有配置...
};

Vite配置修改 #

在vite.config.js中指定构建目标为Node.js版本：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'node16', // 替换为你使用的Node.js版本
  },
});

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