Angular生产构建报错：非字符串字面量的require无法打包

执行ng build --configuration production时触发错误："This call to "require" will not be bundled because the argument is not a string literal"，本地ng serve运行正常，已尝试更新npm/Angular/Node、调整错误预算、升级SSR支持，问题仍存在。

详细构建日志 #

ng build --configuration production --verbose

Building...
polyfills-FFHMD2TL.js 33.7kb
⚡ Done in 31ms
polyfills.server.mjs 262.3kb
⠙ Building...
main-K43KHCE6.js 217.9kb
⠸ Building... ● [DEBUG] This call to "require" will not be bundled because the argument is not a string literal[unsupported-require-call]

node_modules/express/lib/view.js:72:13:
  72 │     var fn = require(mod).__express;
     ╵              ~~~~~~~ ⠼ Building...

server.mjs 1.1mb ⚠️ chunk-DPD2CJOV.mjs
525.3kb chunk-SNU752KB.mjs 12.4kb chunk-VCVCHJZV.mjs 11.8kb chunk-5XUXGTUW.mjs 2.5kb render-utils.server.mjs 1.4kb main.server.mjs 149b

Browser bundles Initial chunk files | Names | Raw size | Estimated transfer size main-K43KHCE6.js | main
| 223.11 kB | 59.65 kB polyfills-FFHMD2TL.js | polyfills | 34.52 kB | 11.28 kB styles-WCBAZ6MA.css | styles | 1.16 kB |
337 bytes

| Initial total       | 258.78 kB |                71.26 kB

Server bundles Initial chunk files | Names | Raw size server.mjs | server | 1.11 MB | chunk-DPD2CJOV.mjs | - | 537.95 kB | polyfills.server.mjs | polyfills.server | 268.60 kB | chunk-SNU752KB.mjs | - | 12.68 kB | chunk-5XUXGTUW.mjs | - | 2.55 kB | render-utils.server.mjs | render-utils.server | 1.46 kB | main.server.mjs | main.server | 149 bytes |

Lazy chunk files | Names | Raw size chunk-VCVCHJZV.mjs | xhr2 | 12.07 kB |

Prerendered 1 static route. Application bundle generation complete.[5.198 seconds]

package.json内容 #

{  
  "name": "my-project-name",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve",    
    "build": "ng build",    
    "watch": "ng build --watch --configuration development",    
    "test": "ng test",    
    "serve:ssr:my-project-name": "node dist/my-project-name/server/server.mjs"  
  },  
  "private": true,  
  "dependencies": {    
    "@angular/animations": "^18.2.11",    
    "@angular/common": "^18.2.11",    
    "@angular/compiler": "^18.2.11",    
    "@angular/core": "^18.2.11",    
    "@angular/forms": "^18.2.11",    
    "@angular/platform-browser": "^18.2.11",    
    "@angular/platform-browser-dynamic": "^18.2.11",    
    "@angular/platform-server": "^18.2.11",    
    "@angular/router": "^18.2.11",    
    "@angular/ssr": "^18.2.11",    
    "express": "^4.18.2",    
    "my-project-name": "file:",    
    "rxjs": "~7.8.0",    
    "tslib": "^2.3.0",    
    "zone.js": "~0.14.10"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "^18.2.11",    
    "@angular/cli": "^18.2.11",    
    "@angular/compiler-cli": "^18.2.11",    
    "@types/express": "^4.17.17",    
    "@types/jasmine": "~5.1.0",    
    "@types/node": "^18.18.0",    
    "jasmine-core": "~5.1.0",    
    "karma": "~6.4.0",    
    "karma-chrome-launcher": "~3.2.0",    
    "karma-coverage": "~2.2.0",    
    "karma-jasmine": "~5.1.0",    
    "karma-jasmine-html-reporter": "~2.1.0",    
    "typescript": "~5.4.2"  
  }
}

环境信息 #

Angular CLI: 18.2.11 Node: 20.12.2 Package Manager: npm 10.9.0 OS: win32 x64

Angular: 18.2.11 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, platform-server ... router, ssr

解决方案 #

该错误是Angular服务器端打包器（esbuild）无法处理express中动态require语法导致的——express的view.js使用了require(mod)（mod为变量），不符合esbuild静态分析的要求。

解决步骤： #

1. 修改Angular构建配置，将express排除在服务器打包外
   在angular.json的projects -> [你的项目名] -> architect -> build -> configurations -> production -> server节点中，添加externalDependencies配置：

   "server": {
     "builder": "@angular-devkit/build-angular:server",
     "options": {
       "outputPath": "dist/my-project-name/server",
       "main": "server.ts",
       "tsConfig": "tsconfig.server.json"
     },
     "configurations": {
       "production": {
         "externalDependencies": ["express"],
         "fileReplacements": [
           {
             "replace": "src/environments/environment.ts",
             "with": "src/environments/environment.prod.ts"
           }
         ]
       }
     }
   }
   

   此配置会让esbuild将express视为外部依赖，不进行打包，而是在运行时从node_modules加载。

2. 验证结果
   重新执行ng build --configuration production，错误会消失。执行npm run serve:ssr:my-project-name确认SSR功能正常。

3. 备选方案（不推荐）
   如果上述配置无效，可尝试将express降级到v4.17.x版本，但可能引入其他兼容性问题，优先使用第一种方案。

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