Angular 17 build stuck in phase:setup

[gsenechal]

Command

build, serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

This is more of an help request than a bug report, as i'm not sure if the issue is really with the CLI or with something else, but i can't pinpoint anything.

After an update from Angular 16 to Angular 17 (project was created in Angular 13, updated to 14, 15 and 16 with no issues), the build and serve commands are now stuck in phase: setup..., undefinitely. No error is provided by the CLI even if we had the --verbose parameter.

Project is setup with @angular-builds/custom-webpack. I tried switching builders with no avail.

Minimal Reproduction

Here is the angular.json file :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "my-app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["src/polyfills.ts"],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/_redirects",
              "src/README.md",
              "src/.htaccess",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/@vex/styles/tailwind.scss",
              "src/styles.scss",
              "src/app/libs/uplot/uPlot.min.css",
              "node_modules/leaflet/dist/leaflet.css"
            ],
            "scripts": [
            ],
            "allowedCommonJsDependencies": [
              "simplebar",
              "highlight.js",
              "faker",
              "showdown",
              "core-js",
              "dom-set",
              "dom-plane",
              "angular-calendar/date-adapters/date-fns",
              "calendar-utils/date-adapters/date-fns",
              "@mattlewis92/dom-autoscroller",
              "apexcharts"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json",
            "webWorkerTsConfig": "tsconfig.worker.json",
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true,
              "mergeRules": {
                "externals": "replace"
              }
            }
          },
          "configurations": {
            "production": {
              "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ],
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "my-app:build:production"
            },
            "development": {
              "buildTarget": "my-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "my-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "webWorkerTsConfig": "tsconfig.worker.json"
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "cache": {
      "enabled": false
    }
  }
}

And the package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "jest --coverage",
    "watch": "jest --watch",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@abhinavakhil/iconify-angular": "^16.0.0",
    "@angular/animations": "^17.3.12",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.12",
    "@angular/compiler": "^17.3.12",
    "@angular/core": "^17.3.12",
    "@angular/elements": "^17.3.12",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^17.3.12",
    "@angular/google-maps": "^17.3.10",
    "@angular/material": "^17.3.10",
    "@angular/material-moment-adapter": "^17.3.10",
    "@angular/platform-browser": "^17.3.12",
    "@angular/platform-browser-dynamic": "^17.3.12",
    "@angular/router": "^17.3.12",
    "@angular/service-worker": "^17.3.12",
    "@googlemaps/js-api-loader": "^1.16.6",
    "@iconify/icons-emojione": "~1.1.0",
    "@iconify/icons-fa-brands": "~1.1.0",
    "@iconify/icons-fa-solid": "^1.1.1",
    "@iconify/icons-ic": "^1.1.6",
    "@iconify/icons-logos": "^1.1.10",
    "@ngneat/until-destroy": "~9.0.0",
    "@ngx-loading-bar/core": "^5.1.2",
    "@ngx-loading-bar/router": "^5.1.2",
    "@sentry/angular-ivy": "^7.61.0",
    "@sentry/cli": "^2.21.2",
    "@yaga/leaflet-cached-tile-layer": "^1.0.0",
    "angular-calendar": "~0.29.0-beta.10",
    "apexcharts": "~3.25.0",
    "aws-amplify": "^6.5.3",
    "csv-parse": "^5.0.4",
    "d3": "^7.6.1",
    "date-fns": "~2.19.0",
    "file-saver": "^2.0.5",
    "firebase": "^9.17.1",
    "firestore-size": "^2.0.7",
    "highlight.js": "~10.6.0",
    "jspdf": "^2.5.1",
    "leaflet": "^1.9.4",
    "luxon": "~1.26.0",
    "marked": "^12.0.2",
    "moment": "^2.29.1",
    "net": "^1.0.2",
    "ngx-markdown": "^17.2.1",
    "ngx-quicklink": "~0.2.7",
    "ngx-quill": "^16.0.1",
    "ngx-showdown": "~6.0.0",
    "ngx-socket-io": "4.6.1",
    "node-polyfill-webpack-plugin": "^4.0.0",
    "pako": "^2.1.0",
    "plotly.js-dist": "^2.8.3",
    "process": "^0.11.10",
    "quill": "^1.3.7",
    "showdown": "~1.9.1",
    "simplebar": "~5.3.6",
    "socket.io-client": "^4.5.4",
    "tailwindcss": "^2.2.19",
    "timechart": "^0.5.2",
    "tslib": "^2.3.0",
    "xlsx": "^0.18.5",
    "yamljs": "^0.3.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^17.0.2",
    "@angular-devkit/build-angular": "^17.3.9",
    "@angular-devkit/core": "^17.3.9",
    "@angular/cli": "^17.3.9",
    "@angular/compiler-cli": "^17.3.12",
    "@angular/language-service": "^17.3.12",
    "@aws-amplify/backend": "^1.2.0",
    "@aws-amplify/backend-cli": "^1.2.5",
    "@electron/remote": "^2.1.2",
    "@types/faker": "^5.5.6",
    "@types/googlemaps": "^3.43.3",
    "@types/jasminewd2": "^2.0.9",
    "@types/jest": "^29.5.12",
    "@types/luxon": "^1.25.3",
    "@types/marked": "^4.0.8",
    "@types/node": "^14.14.45",
    "@types/showdown": "~1.9.4",
    "@types/simplebar": "~5.3.3",
    "autoprefixer": "^10.4.0",
    "aws-cdk": "^2.155.0",
    "aws-cdk-lib": "^2.155.0",
    "codelyzer": "^6.0.2",
    "constructs": "^10.3.0",
    "electron": "^28.1.4",
    "esbuild": "^0.23.1",
    "faker": "~5.4.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "^29.7.0",
    "jest-preset-angular": "^14.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "postcss": "^8.4.45",
    "postcss-scss": "^4.0.9",
    "protractor": "^7.0.0",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.2",
    "tslint": "^6.1.3",
    "tsx": "^4.19.0",
    "typescript": "5.4.5",
    "webpack": "^5.94.0"
  },
  "browser": {
    "fs": false,
    "os": false,
    "path": false
  }
}

I've reduced the webpack.config.js to a minimal module.exports = {}, but nothing changed.

Exception or Error

None returned by the CLI

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.3.9
Node: 22.6.0 (Unsupported)
Package Manager: npm 10.8.2
OS: win32 x64

Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1703.9
@angular-devkit/build-angular      17.3.9
@angular-devkit/build-webpack      0.1802.3
@angular-devkit/core               17.3.9
@angular-devkit/schematics         17.3.9
@angular/cdk                       17.3.10
@angular/cli                       17.3.9
@angular/flex-layout               15.0.0-beta.42
@angular/google-maps               17.3.10
@angular/material                  17.3.10
@angular/material-moment-adapter   17.3.10
@schematics/angular                17.3.9
typescript                         5.4.5
webpack                            5.94.0
zone.js                            0.14.10

Anything else relevant?

I'm running everything on Windows 11, NVM, switched node versions (from 16 to 22).
Cleared npm cache, tried changing versions on packages, ...

I've opened every single file of the project and fixed every error i found after update from 16 to 17.

Please let me know if you need any additional info !

Thank you in advance !

[JoostK]

Does this repro using Node 20? Angular 17 does not support Node 22.

[gsenechal]

@JoostK yes i have exactly the same issue with Node 20.11.1, even after clearing node_modules & package-lock.json.

[JoostK]

Next question, does this reproduce using the default Webpack builder, not custom-webpack. The latter implements all build logic on its own, having reduced the custom Webpack config to {} is still not equivalent to the default builder.

Additionally, it sparks me as odd that you have angular-webpack 0.18 in your version overview, whereas all other deps are for v17.

[gsenechal]

@JoostK the default webpack builder being @angular-devkit/build-webpack, or the default @angular-devkit/build-angular:application ?
I'm not very familiar with all the builders.

angular-webpack 0.18 is a test i made this morning (i just did the npm i without adding the specific version number so it took the latest one). I have not been able to make it work following the readme, as it says it cannot find my src folder, and i haven't found out why yet

Anyway i just want to say i do appreciate the effort and the time you take to answer to me and help me, many thanks !

[JoostK]

I mean @angular-devkit/build-angular:browser, which is the Webpack builder. I think @angular-devkit/angular-webpack is an internal dependency.

[gsenechal]

@JoostK yes it does exactly the same thing with @angular-devkit/build-angular:browser, build gets stuck on the first phase (setup), so right after it starts :/

[JoostK]

We'd need a minimal reproduction to determine what's going on here.

[gsenechal]

Sure things, i'll have to work on this as the project is not small, but i'll let you know as soon as i have it !

Thanks :)

[gsenechal]

@JoostK So by trying to get a minimal reproduction by clearing files from my repo, i was able to pinpoint the issue.

private ConnectedScatterplot(values: any[], {
    width = 640, // outer width, in pixels
    height = 400, // outer height, in pixels
    r = 3, // (fixed) radius of dots, in pixels
    marginTop = 20, // top margin, in pixels
    marginRight = 20, // right margin, in pixels
    marginBottom = 30, // bottom margin, in pixels
    marginLeft = 30, // left margin, in pixels
    inset = r * 2, // inset the default range, in pixels
    insetTop = inset, // inset the default y-range
    insetRight = inset, // inset the default x-range
    insetBottom = inset, // inset the default y-range
    insetLeft = inset, // inset the default x-range
    // xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // uncomment this to block build
    // yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // uncomment this to block build
  }) {
  }

This function is the root cause of all my trouble. The combination of the xRange and yRange in the parameters cause the build to crash. Having either one of them seems OK, but the two of them at the same time causes the build to freeze directly.

I'm not sure why this was working in Angular 16 and not in Angular 17, and why no error is returned.

[gsenechal]

Minimal repro case :
repro-build-issue.zip

Not working :

• run npm i
• run npm run build or npm run start
• build is stuck

Working :

• comment lines 29 and/or 30 in app.component.ts
• run npm run build or npm run start
• build is running

[JoostK]

This appears to be a regression in TypeScript 5.4, also reproducible with TS 5.5, but not with TS 5.6-rc. TS 5.6 is scheduled to be released today but won't be supported in Angular yet (that's currently only expected for Angular 19).

Closing as not actionable from our end.