升级Angular 19集成FabricJS编译缺失Node依赖报错求助

开发者阿泽

2026-6-23

解决Angular 19升级后FabricJS依赖Node.js原生模块的编译错误

我正在升级一个使用FabricJS的Angular应用，旧版本依赖Node.js 14，现升级至Angular 19并使用Node.js 18。编译时出现大量类似如下的错误：

✘ [ERROR] Could not resolve "path"

    node_modules/jsdom/lib/jsdom/utils.js:3:21:
      3 │ const path = require("path");
        ╵                      ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

错误源于FabricJS依赖jsdom，而jsdom使用了Node.js原生函数，但我的应用是浏览器端应用，不应依赖Node.js。之前旧版本Angular集成FabricJS能正常运行，现在升级后出现问题，需要可行的编译解决方案。

当前配置文件

package.json

{"name": "company-box-ui","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve --configuration development","build": "ng build fedex-ui","build-prod": "ng build --configuration production fedex-ui","build-local": "ng build --configuration local fedex-ui","start-local": "ng serve --host 0.0.0.0 --port 4202 --configuration local fedex-ui","build-local-sandbox": "ng build --configuration local-sandbox fedex-ui","start-local-sandbox": "ng serve --host 0.0.0.0 --port 4202 --configuration local-sandbox fedex-ui","build-sandbox": "ng build --configuration sandbox fedex-ui","start-sandbox": "ng serve --host 0.0.0.0 --port 4202 --configuration sandbox fedex-ui","build-admin": "ng build admin-ui","build-admin-prod": "ng build --configuration production admin-ui","build-admin-local-sandbox": "ng build --configuration local-sandbox admin-ui","start-admin-local-sandbox": "ng serve --host 0.0.0.0 --port 4201 --configuration local-sandbox admin-ui","build-admin-sandbox": "ng build --configuration sandbox admin-ui","start-admin-sandbox": "ng serve --host 0.0.0.0 --port 4201 --configuration sandbox admin-ui","watch": "ng build --watch --configuration development","test": "npx playwright test"},"private": true,"dependencies": {"@angular/animations": "^19.0.4","@angular/cdk": "^19.0.3","@angular/common": "^19.0.4","@angular/compiler": "^19.0.4","@angular/core": "^19.0.4","@angular/forms": "^19.0.4","@angular/material": "^19.0.3","@angular/platform-browser": "^19.0.4","@angular/platform-browser-dynamic": "^19.0.4","@angular/router": "^19.0.4","@ng-select/ng-select": "^14.1.0","angular-user-idle": "^4.0.0","bootstrap": "^5.3.3","chart.js": "^4.4.3","crypto-js": "^4.2.0","fabric": "~5.3.0","js-file-download": "^0.4.12","lodash.debounce": "^4.0.8","logrocket": "^9.0.1","moment": "^2.30.1","ng-multiselect-dropdown": "^1.0.0","ng2-avatar": "^2.3.1","ng2-charts": "^6.0.1","ng2-pdfjs-viewer": "^18.0.0","ngx-avatars": "^1.8.0","ngx-bootstrap": "^19.0.1","ngx-clipboard": "^16.0.0","ngx-dropzone": "^3.1.0","ngx-dropzone-wrapper": "^17.0.0","ngx-logger": "^5.0.12","ngx-moment": "^6.0.2","ngx-ui-switch": "^15.0.0","nxt-sortablejs": "^19.0.4","pace-js": "^1.2.4","popper.js": "^1.16.1","rxjs": "~7.8.1","sortablejs": "^1.15.6","spinkit": "^2.0.1","three": "^0.170.0","tslib": "^2.6.2","zone.js": "~0.15.0"},"devDependencies": {"@angular-devkit/build-angular": "^19.0.4","@angular/cli": "^19.0.4","@angular/compiler-cli": "^19.0.4","@playwright/test": "^1.48.2","@types/crypto-js": "^4.2.2","@types/fabric": "^5.3.7","@types/jquery": "^3.5.30","@types/lodash": "^4.17.13","@types/moment": "^2.13.0","@types/moment-timezone": "^0.5.13","@types/node": "^22.9.0","@types/three": "^0.170.0","jasmine-core": "~5.1.2","karma": "~6.4.3","karma-chrome-launcher": "~3.2.0","karma-coverage": "~2.2.1","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.1.0","ng-packagr": "^19.0.1","typescript": "~5.6.3"}}

tsconfig.json

{"compileOnSave": false,"compilerOptions": {"skipLibCheck": true,"baseUrl": "./","downlevelIteration": true,"outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"module": "esnext","moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"importHelpers": true,"target": "es2015","typeRoots": ["node_modules/@types"],"lib": ["es2018","dom"]}}

解决方案

1. 使用FabricJS浏览器专属版本

FabricJS的默认npm包包含Node.js环境依赖，改用浏览器专属构建版本可直接解决问题：

修改package.json中的fabric依赖：

"fabric": "npm:@fabricjs/fabric-browser-only@~5.3.0"

重新安装依赖：
```
npm install
```

该版本移除了jsdom等Node.js相关依赖，仅保留浏览器运行所需代码。

2. 配置Webpack忽略Node.js原生模块

若不想更换FabricJS版本，可通过自定义Webpack配置忽略浏览器中不存在的Node.js模块：

安装自定义Webpack构建器：

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

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

module.exports = {
  resolve: {
    fallback: {
      "path": false,
      "fs": false,
      "os": false,
      "crypto": false
      // 根据实际报错添加其他需要忽略的模块
    }
  }
};

修改angular.json中的构建配置：
将build和serve的builder替换为自定义Webpack版本，并指定配置文件路径：

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

3. 升级FabricJS到最新稳定版

FabricJS后续版本可能优化了浏览器端依赖处理，尝试升级：

npm install fabric@latest --save

升级后需验证原有功能是否正常。

旧版本正常运行的原因

旧版Angular使用的Webpack版本较低，会自动忽略浏览器中不存在的Node.js原生模块；同时旧版FabricJS在浏览器环境下可能不会引入jsdom依赖。而Angular 19升级到Webpack 5后，默认不再为Node.js原生模块提供polyfill或自动忽略，因此抛出错误。

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