升级ServiceStack/Client至2.X后ng build出现node:fs/node:path错误求助

尝试将@servicestack/client从1.X升级到2.X后，执行ng build时出现以下错误（1.X最新版本可正常运行）：

node:fs - Error: Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

node:path - Error: Module build failed: UnhandledSchemeError: Reading from "node:path" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

环境信息 #

已安装的npm包列表 #

+-- @angular-devkit/build-angular@14.2.10
+-- @angular/animations@14.2.12
+-- @angular/cli@14.2.10
+-- @angular/common@14.2.12
+-- @angular/compiler-cli@14.2.12
+-- @angular/compiler@14.2.12
+-- @angular/core@14.2.12
+-- @angular/forms@14.2.12
+-- @angular/language-service@14.2.12
+-- @angular/platform-browser-dynamic@14.2.12
+-- @angular/platform-browser@14.2.12
+-- @angular/router@14.2.12
+-- @ng-bootstrap/ng-bootstrap@13.1.1
+-- @ngx-translate/core@14.0.0
+-- @ngx-translate/http-loader@7.0.0
+-- @popperjs/core@2.11.6
+-- @servicestack/client@2.0.7
+-- @types/google-libphonenumber@7.4.23
+-- @types/node@18.14.6
+-- angular-code-input@1.6.0
+-- bootstrap@5.2.3
+-- core-js@3.29.0
+-- google-libphonenumber@3.2.32
+-- jquery@3.6.3
+-- node-fs@0.1.7
+-- node-libs-browser@2.2.1
+-- rxjs@7.8.0
+-- ts-node@10.9.1
+-- tslib@2.5.0
+-- tslint@6.1.3
+-- typescript@4.8.4
`-- zone.js@0.12.0

npm & Node版本 #

• npm版本：9.6.0
• Node版本：v18.14.2

package.json配置 #

{  
  "name": "portal",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "echo Starting 'ng serve'... && ng serve",    
    "start:iis": "echo Starting 'ng build --watch'... && ng build --watch",    
    "build": "ng build",    
    "build:ssr": "ng run Portal:server:dev",    
    "test": "ng test",    
    "lint": "ng lint",    
    "e2e": "ng e2e",    
    "postinstall": "ngcc"  
  },  
  "private": true,  
  "dependencies": {    
    "@angular/animations": "14.2.12",    
    "@angular/common": "14.2.12",    
    "@angular/compiler": "14.2.12",    
    "@angular/core": "14.2.12",    
    "@angular/forms": "14.2.12",    
    "@angular/platform-browser": "14.2.12",    
    "@angular/platform-browser-dynamic": "14.2.12",    
    "@angular/router": "14.2.12",    
    "@ng-bootstrap/ng-bootstrap": "13.1.1",    
    "@ngx-translate/core": "^14.0.0",    
    "@ngx-translate/http-loader": "^7.0.0",    
    "@popperjs/core": "^2.11.6",    
    "@servicestack/client": "^2.0.7",    
    "angular-code-input": "^1.6.0",    
    "bootstrap": "^5.2.3",    
    "core-js": "^3.29.0",    
    "google-libphonenumber": "^3.2.32",    
    "jquery": "^3.6.3",    
    "node-fs": "^0.1.7",    
    "rxjs": "^7.8.0",    
    "ts-node": "^10.9.1",    
    "tslib": "^2.5.0",    
    "zone.js": "^0.12.0"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "14.2.10",    
    "@angular/cli": "14.2.10",    
    "@angular/compiler-cli": "14.2.12",    
    "@angular/language-service": "14.2.12",    
    "@types/google-libphonenumber": "^7.4.23",    
    "@types/node": "^18.14.6",    
    "node-libs-browser": "^2.2.1",    
    "typescript": "4.8.4"  
  },  
  "optionalDependencies": {    
    "tslint": "~6.1.3"  
  }
}

tsconfig配置 #

{  
  "extends": "../tsconfig.json",  
  "compilerOptions": {    
    "outDir": "../out-tsc/app",    
    "experimentalDecorators": true,    
    "types": [ "node" ],    
    "target": "es2020"  
  },  
  "files": [    
    "main.ts",    
    "polyfills.ts"  
  ],  
  "include": [    
    "src/**/*.d.ts"  
  ]
}

angular.json配置 #

{  
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
  "cli": {    
    "analytics": false  
  },  
  "version": 1,  
  "newProjectRoot": "projects",  
  "projects": {    
    "Portal": {      
      "root": "",      
      "sourceRoot": "src",      
      "projectType": "application",      
      "prefix": "app",      
      "schematics": {},      
      "architect": {        
        "build": {          
          "builder": "@angular-devkit/build-angular:browser",          
          "options": {            
            "progress": false,            
            "outputPath": "dist",            
            "index": "src/index.html",            
            "main": "src/main.ts",            
            "polyfills": "src/polyfills.ts",            
            "tsConfig": "src/tsconfig.app.json",            
            "assets": [              
              "src/assets"            
            ],            
            "styles": [              
              "node_modules/bootstrap/dist/css/bootstrap.min.css",              
              "src/styles.css"            
            ],            
            "scripts": [],            
            "vendorChunk": true,            
            "extractLicenses": false,            
            "buildOptimizer": false,            
            "sourceMap": true,            
            "optimization": false,            
            "namedChunks": true,            
            "allowedCommonJsDependencies": [ "google-libphonenumber", "@servicestack/client" ]          
          },          
          "configurations": {            
            "production": {              
              "budgets": [                
                {                  
                  "type": "anyComponentStyle",                  
                  "maximumWarning": "6kb"                
              }              
            ],              
            "fileReplacements": [                
              {                  
                "replace": "src/environments/environment.ts",                  
                "with": "src/environments/environment.prod.ts"                
              }              
            ],              
            "optimization": true,              
            "outputHashing": "all",              
            "sourceMap": false,              
            "namedChunks": false,              
            "extractLicenses": true,              
            "vendorChunk": false,              
            "buildOptimizer": true            
          }          
        },          
        "defaultConfiguration": ""        
      },        
      "serve": {          
        "builder": "@angular-devkit/build-angular:dev-server",          
        "options": {            
          "browserTarget": "Portal:build"          
        },          
        "configurations": {            
          "production": {              
            "browserTarget": "Portal:build:production"            
          }          
        }        
      },        
      "extract-i18n": {          
        "builder": "@angular-devkit/build-angular:extract-i18n",          
        "options": {            
          "browserTarget": "Portal:build"          
        }        
      },        
      "test": {          
        "builder": "@angular-devkit/build-angular:karma",          
        "options": {            
          "main": "src/test.ts",            
          "polyfills": "src/polyfills.ts",            
          "tsConfig": "src/tsconfig.spec.json",            
          "karmaConfig": "src/karma.conf.js",            
          "styles": [ "src/styles.css" ],            
          "scripts": [],            
          "assets": [ "src/assets" ]          
        }        
      },        
      "server": {          
        "builder": "@angular-devkit/build-angular:server",          
        "options": {            
          "outputPath": "dist-server",            
          "main": "src/main.ts",            
          "tsConfig": "src/tsconfig.server.json",            
          "sourceMap": true,            
          "optimization": false          
        },          
        "configurations": {            
          "dev": {              
            "optimization": true,              
            "outputHashing": "all",              
            "sourceMap": false,              
            "namedChunks": false,              
            "extractLicenses": true            
          },            
          "production": {              
            "optimization": true,              
            "outputHashing": "all",              
            "sourceMap": false,              
            "namedChunks": false,              
            "extractLicenses": true            
          }          
        },          
        "defaultConfiguration": ""        
      }      
    }    
  },    
  "Portal-e2e": {      
    "root": "e2e/",      
    "projectType": "application",      
    "architect": {        
      "e2e": {          
        "builder": "@angular-devkit/build-angular:protractor",          
        "options": {            
          "protractorConfig": "e2e/protractor.conf.js",            
          "devServerTarget": "Portal:serve"          
        }        
      }      
    }    
  }  
}

问题原因 #

@servicestack/client 2.X版本开始使用Node.js的node:协议导入模块（如node:fs、node:path），但你当前使用的Angular 14对应的Webpack版本默认不处理该协议，导致构建报错；同时Angular 14的@angular-devkit/build-angular也未内置对node:协议的解析支持。

解决步骤 #

方案1：添加Webpack插件处理node:协议 #

1. 安装处理插件：

npm install webpack-node-scheme-plugin --save-dev

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

const NodeSchemePlugin = require('webpack-node-scheme-plugin');

module.exports = {
  plugins: [
    new NodeSchemePlugin()
  ]
};

3. 修改angular.json中build的options，添加自定义Webpack配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 保留原有配置...
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    }
  }
}

方案2：降级@servicestack/client #

如果不想修改Webpack配置，可以暂时降级到@servicestack/client 2.X中未使用node:协议的版本，或者等待后续适配Angular 14的版本发布。

方案3：升级Angular版本 #

升级到Angular 15或更高版本，新版本的@angular-devkit/build-angular已内置对node:协议的解析支持，无需额外配置。

额外优化 #

移除过时的node-fs依赖（该包与官方fs模块冲突且无必要）：

npm uninstall node-fs

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