添加@angular-builders/custom-webpack:dev-server后npm build耗时过久且失败

项目配置信息 #

angular.json 完整配置 #

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "youdeserve-frontend": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            "outputPath": "dist/youdeserve-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "youdeserve-frontend:build:production"
            },
            "development": {
              "browserTarget": "youdeserve-frontend:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-builders/custom-webpack:extract-i18n",
          "options": {
            "browserTarget": "youdeserve-frontend:build"
          }
        },
        "test": {
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "e7d22a45-f66b-44a6-a42f-ff748a4fa018",
    "schematicCollections": ["@angular-eslint/schematics"]
  }
}

package.json devDependencies 片段 #

"devDependencies": {
    "@angular-builders/custom-webpack": "^14.0.1",

构建错误日志 #

1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm@6.14.15
3 info using node@v14.18.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle youdeserve-frontend@0.0.0~prebuild: youdeserve-frontend@0.0.0
6 info lifecycle youdeserve-frontend@0.0.0~build: youdeserve-frontend@0.0.0
7 verbose lifecycle youdeserve-frontend@0.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle youdeserve-frontend@0.0.0~build: PATH: /agent/_work/_tool/node/14.18.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/agent/_work/1/s/youdeserve-frontend/node_modules/.bin:/agent/_work/_tool/node/14.18.1/x64/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
9 verbose lifecycle youdeserve-frontend@0.0.0~build: CWD: /agent/_work/1/s/youdeserve-frontend
10 silly lifecycle youdeserve-frontend@0.0.0~build: Args: [ '-c', 'ng build' ]
11 silly lifecycle youdeserve-frontend@0.0.0~build: Returned: code: 3 signal: null
12 info lifecycle youdeserve-frontend@0.0.0~build: Failed to exec build script
13 verbose stack Error: youdeserve-frontend@0.0.0 build: `ng build`
13 verbose stack Exit status 3
13 verbose stack at EventEmitter.<anonymous> (/agent/_work/_tool/node/14.18.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:400:28)
13 verbose stack at ChildProcess.<anonymous> (/agent/_work/_tool/node/14.18.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:400:28)
13 verbose stack at maybeClose (internal/child_process.js:1058:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
14 verbose pkgid youdeserve-frontend@0.0.0
15 verbose cwd /agent/_work/1/s/youdeserve-frontend
16 verbose Linux 5.4.0-1094-azure
17 verbose argv "/agent/_work/_tool/node/14.18.1/x64/bin/node" "/agent/_work/_tool/node/14.18.1/x64/bin/npm" "run" "build"
18 verbose node v14.18.1
19 verbose npm v6.14.15
20 error code ELIFECYCLE
21 error errno 3
22 error youdeserve-frontend@0.0.0 build: `ng build`
22 error Exit status 3
23 error Failed at the youdeserve-frontend@0.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3, true ]
##[error]Error: Npm failed with return code: 3
Finishing: Npm Build

现象总结 #

• 引入@angular-builders/custom-webpack并配置所有相关builder后，执行npm run build耗时长达1小时，最终以退出码3失败
• 仅移除architect.serve节点下的"builder": "@angular-builders/custom-webpack:dev-server"配置，恢复为默认builder后，构建可正常完成

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