Angular 5升级至10后执行ng serve遇Module not found错误求助

问题分析 #

你遇到的两个核心问题：

1. cptable模块找不到：xlsx-style的dist目录下缺少该文件，属于包本身的遗留问题
2. fs模块找不到：Angular浏览器环境不支持Node.js的fs模块，而xlsx-style依赖了该模块

可行解决方案 #

方案1：替换为维护活跃的替代包（推荐） #

xlsx-style已多年未维护，不兼容Angular 6+的构建体系，建议改用xlsx官方包配合样式扩展：

• 卸载旧包：npm uninstall xlsx-style
• 安装最新xlsx：npm install xlsx
• 若需要样式支持，可使用xlsx-populate或通过xlsx原生API配置单元格样式（xlsx本身支持基础样式设置）

方案2：修复xlsx-style的兼容问题 #

如果必须保留xlsx-style，按以下步骤操作：

1. 处理cptable缺失问题
   在项目根目录创建src/assets/cptable文件夹，从xlsx包的dist目录复制cptable.js和cptable.json到该目录，然后修改node_modules/xlsx-style/dist/cpexcel.js中的路径：
   将require('./cptable')改为require('../../../src/assets/cptable')
   （注：该修改会在npm install后被覆盖，建议使用patch-package工具持久化修改）

2. 配置Angular忽略fs模块
   Angular 6+通过angular.json管理构建，需借助@angular-builders/custom-webpack自定义webpack配置：

   • 安装依赖：npm install @angular-builders/custom-webpack --save-dev
   • 在项目根目录创建webpack.extra.js，内容如下：

     module.exports = {
       node: {
         fs: 'empty'
       },
       resolve: {
         fallback: {
           fs: false
         }
       }
     };
     

   • 修改angular.json中的build和serve配置，替换builder并添加自定义webpack配置：

     "architect": {
       "build": {
         "builder": "@angular-builders/custom-webpack:browser",
         "options": {
           "customWebpackConfig": {
             "path": "./webpack.extra.js"
           },
           // 保留原有其他配置
         }
       },
       "serve": {
         "builder": "@angular-builders/custom-webpack:dev-server",
         "options": {
           "browserTarget": "你的项目名称:build"
         }
       }
     }
     

方案3：降级Node.js版本（不推荐） #

xlsx-style对Node.js 10+兼容性较差，可尝试降级到Node.js 8.x版本，但会影响Angular 10的部分功能支持，不建议采用。

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