"ENOENT: no such file or directory" with @angular/cli 17.1.0

[ssougnez]

Command

build

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

17.0.9

Description

When running ng build --watch, I get the following from time to time:

An unhandled exception occurred: ENOENT: no such file or directory, mkdir 'C:\Development\dotnetcore\HR-NET\SFPD.Workflows\wwwroot\browser\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App'
See "C:\Users\SOUSE\AppData\Local\Temp\ng-ZtZxWx\angular-errors.log" for further details.

Minimal Reproduction

Unfortunately, I can't provide clear instructions on how to reproduce the issue as it comes from time to time.
Basically, I'm building the application with the watch flag and sometimes I get the aforementioned error.
It seems to occur after I fixed errors in the code impacting a lot of components and not when I just do some code update that work.

Stating the obvious, it seems that at some point, the path is generated and concatenate a full path with a full path instead of a full one with a relative one creating invalid path such as C:\Development\dotnetcore\HR-NET\SFPD.Workflows\wwwroot\browser\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App

I didn't not encounter this issue prior to 17.1.0.

Here is my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "hr-net": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "../SFPD.Workflows/wwwroot",
            "preserveSymlinks": true,
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@sfpd/ng-ui/themes/default.scss",
              "node_modules/flag-icons/css/flag-icons.min.css",
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-pro/css/all.min.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "fonts": false
              },
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "media"
            }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

Exception or Error

An unhandled exception occurred: ENOENT: no such file or directory, mkdir 'C:\Development\dotnetcore\HR-NET\SFPD.Workflows\wwwroot\browser\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App\C:\Development\dotnetcore\HR-NET\SFPD.Workflows.App'
See "C:\Users\SOUSE\AppData\Local\Temp\ng-ZtZxWx\angular-errors.log" for further details.

Your Environment

Angular CLI: 17.1.0
Node: 20.10.0
Package Manager: yarn 1.22.19
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.0
@angular-devkit/build-angular   17.1.0
@angular-devkit/core            17.1.0
@angular-devkit/schematics      17.1.0
@schematics/angular             17.1.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.3

Anything else relevant?

No response

[alan-agius4]

Hi @ssougnez, unfortunately without a reproduction this will be hard to track down.

[ssougnez]

I can imagine.

I'm paying attention of what I'm doing to reproduce this error but it's pretty difficult as it really comes from time to time.
Can you just keep the issue opened just to see if other people are concerned?

I'll post a comment here if I can isolate a reproducible scenario.

Thanks

[alvicode]

I also have the same issue:

[error] Error: ENOENT: no such file or directory, mkdir 'C:\git\xxxxx\Identity.Portal\wwwroot\dist\C:\git\xxxxx\Identity.Portal\ClientApp\C:\git\xxxxx\Identity.Portal\ClientApp'
at async Object.mkdir (node:internal/fs/promises:855:10)
at async ensureDirectoryExists (C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:76:13)
at async C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:84:9
at async Promise.all (index 53)
at async emitFilesToDisk (C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\build-angular\src\tools\esbuild\utils.js:231:9)
at async writeResultFiles (C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:81:5)
at async buildEsbuildBrowser (C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\build-angular\src\builders\browser-esbuild\index.js:43:13)
at async handleAsyncIterator (C:\git\xxxxx\Identity.Portal\ClientApp\node_modules@angular-devkit\architect\src\api.js:35:28)

the path passed to mkdir is definitely wrong

Thanks

[alvicode]

I know how to reproduce it in my solution.
I create a syntax error, press save, the compiler will do its thing and show that there is an error indeed, then fix the syntax error, press save, cli crashes.

[alan-agius4]

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[alvicode]

for me it fails with a new app created via ng new. No changes at all

[ssougnez]

I'm currently working on a new project and indeed the issue occurs 80% of the time an error is fixed in the code.
So as for the reproduction step, just create a new project using 17.1.0 and repeat the steps described in the GIF posted above.