[ng serve]: webpack-dev-middleware Error: ENOENT: no such file or directory #23844

ramoncarreras · 2022-09-01T14:43:36Z

Command

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

14.1.3

Description

After upgrading to angular 14.2.0 and serving the APP locally, I get the following error:

[webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '<project-directory>/test-app/dist/test-app/'
    at createError (<project-directory>/test-app/node_modules/memfs/lib/volume.js:128:17)
    at Volume.readdirBase (<project-directory>/test-app/node_modules/memfs/lib/volume.js:1415:19)
    at Immediate.<anonymous> (<project-directory>/test-app/node_modules/memfs/lib/volume.js:695:33)
    at processImmediate (node:internal/timers:466:21) {
  code: 'ENOENT'
}

Minimal Reproduction

I created a minimal reproduction in the following repository:

https://github.com/ramoncarreras/angular-test-app

I have tried to minimize the issue as I could, sorry in advance (also see each commit).

In the README.md of the above repository there is a small description of the steps to follow.

The issue appears when I add the localize and the PWA official angular packages.

Exception or Error

[webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '<project-directory>/test-app/dist/test-app/'
    at createError (<project-directory>/test-app/node_modules/memfs/lib/volume.js:128:17)
    at Volume.readdirBase (<project-directory>/test-app/node_modules/memfs/lib/volume.js:1415:19)
    at Immediate.<anonymous> (<project-directory>/test-app/node_modules/memfs/lib/volume.js:695:33)
    at processImmediate (node:internal/timers:466:21) {
  code: 'ENOENT'
}

Your Environment

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

Angular CLI: 14.2.1
Node: 16.14.0
Package Manager: npm 8.5.3 
OS: darwin x64

Angular: 14.2.0
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   14.2.1
@angular-devkit/core            14.2.1
@angular-devkit/schematics      14.2.1
@angular/cli                    14.2.1
@schematics/angular             14.2.1
rxjs                            7.5.6
typescript                      4.7.4

Anything else relevant?

I can build the app locally without any problem. The error only shows when executing the ng serve command.

Also, I was able to reproduce the error in Ubuntu 20.04.

The text was updated successfully, but these errors were encountered:

jornare · 2022-09-02T08:14:30Z

Same, Windows 10

…ith localize in dev-server Previously, we tried to read the files from the wrong location as during localize we alter the output directory to a different temporary location. https://github.com/angular/angular-cli/blob/7e64b1537d54fadb650559214fbb12707324cd75/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L251-L252 Closes angular#23844

…h localize in dev-server Previously, we tried to read the files from the wrong location as during localize we alter the output directory to a different temporary location. https://github.com/angular/angular-cli/blob/7e64b1537d54fadb650559214fbb12707324cd75/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L251-L252 Closes angular#23844

…h localize in dev-server Previously, we tried to read the files from the wrong location as during localize we alter the output directory to a different temporary location. https://github.com/angular/angular-cli/blob/7e64b1537d54fadb650559214fbb12707324cd75/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L251-L252 Closes #23844 (cherry picked from commit f86b384)

Sergiobop · 2022-09-03T17:06:02Z

I don't have the localize package, still happens.

alan-agius4 · 2022-09-03T18:44:19Z

@Sergiobop, in that case you are experiencing a different issue, please file a new issue with a minimal reproduction. Thanks.

Sergiobop · 2022-09-04T10:57:20Z

I updated the repo provided in the issue in my local machine. Deleted the localize package in devDependencies. Removed the localize and i18 references in angular.json. Tried to serve:


<e> [webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '.../dist/test-app/'
<e>     at createError .../angular-test-app/node_modules/memfs/lib/volume.js:128:17)
<e>     at Volume.readdirBase (.../angular-test-app/node_modules/memfs/lib/volume.js:1415:19)
<e>     at Immediate.<anonymous> (.../angular-test-app/node_modules/memfs/lib/volume.js:695:33)
<e>     at processImmediate (node:internal/timers:466:21) {
<e>   code: 'ENOENT'
<e> }

I don't think it's related to the localize package @alan-agius4

Angular CLI: 14.2.1
Node: 16.17.0
Package Manager: npm 8.15.0
OS: darwin x64

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

Package Version

@angular-devkit/architect 0.1402.1
@angular-devkit/build-angular 14.2.1
@angular-devkit/core 14.2.1
@angular-devkit/schematics 14.2.1
@angular/cli 14.2.1
@schematics/angular 14.2.1
rxjs 7.5.6
typescript 4.7.4

Sergiobop · 2022-09-04T18:12:52Z

Downgrading to 14.1.3 solves the issue, i think is related to the service-worker

DadvDadv · 2022-09-05T09:40:33Z

Angular CLI: 14.2.1
Node: 18.8.0
Package Manager: npm 8.18.0
OS: win 10 x64

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

Package Version
@angular-devkit/build-angular 14.2.1
@angular/cli 14.2.1
rxjs 7.5.6
typescript 4.8.2

=> Same error

Edit :
Update by using the cli (ng update and not directly change in package.json) and downgrade "typescript": "~4.7.4" solve the pb.

Sergiobop · 2022-09-05T10:47:37Z

As we stated if this happens without the localize package and you said it's a different issue.. should this be reopened?

Thanks @alan-agius4

alan-agius4 · 2022-09-05T12:02:44Z

@Sergiobop, I looked into this a bit more and it seems that in some cases if there is an initial compilation error the original error is not shown and eventually the build crashes with the readdir error. Example, with this changes you mentioned the build should fail with./src/polyfills.ts:4:0-32 - Error: Module not found: Error: Can't resolve '@angular/localize/init'.

I have a PR in flight to address this.

sourav-bhar · 2022-09-07T04:17:11Z

Following up on the cause for this error being a compilation error (as mentioned by @alan-agius4 above), one workaround for this issue is:

Run a production build -> it will throw the compilation error(s)
Fix the compilation erorr(s)
Serve the app locally

It should now work.

fr20587 · 2022-09-07T04:20:17Z

[webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '...\dist\aes'
at createError (...\node_modules\memfs\lib\volume.js:128:17)
at Volume.readdirBase (...\node_modules\memfs\lib\volume.js:1415:19)
at Immediate. (...\node_modules\memfs\lib\volume.js:695:33)
at processImmediate (node:internal/timers:466:21) {
code

julienvonoetinger-eaton · 2022-09-07T06:07:00Z

@sourav-bhar I have the same issue and I have tried to follow the steps you mentioned. The production build returns no error but when I do ng serve I get:

[webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '...\dist\apps\...\'
<e>     at createError (...\node_modules\memfs\lib\volume.js:128:17)
<e>     at Volume.readdirBase (...\node_modules\memfs\lib\volume.js:1415:19)
<e>     at Immediate.<anonymous> (...\node_modules\memfs\lib\volume.js:695:33)
<e>     at processImmediate (node:internal/timers:466:21) {
<e>   code: 'ENOENT'
<e> }

sourav-bhar · 2022-09-07T06:25:01Z

@sourav-bhar I have the same issue and I have tried to follow the steps you mentioned. The production build returns no error but when I do ng serve I get:

[webpack-dev-middleware] Error: ENOENT: no such file or directory, readdir '...\dist\apps\...\'
<e>     at createError (...\node_modules\memfs\lib\volume.js:128:17)
<e>     at Volume.readdirBase (...\node_modules\memfs\lib\volume.js:1415:19)
<e>     at Immediate.<anonymous> (...\node_modules\memfs\lib\volume.js:695:33)
<e>     at processImmediate (node:internal/timers:466:21) {
<e>   code: 'ENOENT'
<e> }

@julien-von-oetinger – I'm not sure if this helps, but I also did a couple steps prior to running the prod build:

Deleted the "node_modules" folder and re-installed them again w/ npm i
Updated the globally installed angular cli to v14.2 with sudo npm i -g @angular/cli (on mac)
Cleaned the Angular build cache with ng cache clean

Then I proceeded with the production build. This threw a compilation error. After fixing the bug, the local serving bug disappeared. Hope this helps.

julienvonoetinger-eaton · 2022-09-07T07:06:37Z

@sourav-bhar Thanks for your inputs ! Unfortunately it didn't solve the issue for me. I still have the same error and I got no error during production build.

troncomputers · 2022-09-07T07:16:23Z

Same error shows for me after ng add @angular/pwa

#edit
If I set "serviceWorker": false in angular.json error is gone.

julienvonoetinger-eaton · 2022-09-07T09:03:35Z

Same error shows for me after ng add @angular/pwa

#edit If I set "serviceWorker": false in angular.json error is gone.

The only issue with this is that it will completely disable the service work when you run ng serve AND ng build. I don't think there is a way to enable this flag only when you build.

troncomputers · 2022-09-07T09:07:41Z

@julien-von-oetinger so it is an issue with service-worker/pwa? I need it to be disabled on ng serve, because I am not able to code, but ultimately I want pwa to work.

julienvonoetinger-eaton · 2022-09-07T09:12:31Z

@troncomputers Yes I think it related to pwa. You can disable it in order to be able to work as a workaround. But when you'll build your application, the worker will be disabled too. So I'm afraid we will have to wait for a fix from the Angular team for this issue. In the meantime I'm just setting the flag to false and then set if back to true before building in my CI/CD scripts.

troncomputers · 2022-09-07T09:15:36Z

@julien-von-oetinger or we could downgrade the angular to working version 🤔

julienvonoetinger-eaton · 2022-09-07T09:19:29Z

@troncomputers sure that's probably the best option for now.

fr20587 · 2022-09-07T21:06:47Z

The problem is that webpack cant find in which file and line is the code error, so I solved the problem seeking file by file the problem. This problem started after udpate all packeges with npm-check-updates

troncomputers · 2022-09-08T06:12:13Z

@fr20587 I did use npm-check-update when I start the project, but for me the error started to show after I install @angular/pwa

julienvonoetinger-eaton · 2022-09-08T06:20:56Z

@fr20587 I'm not using npm-check-update but still got the issue after I updated to 14.2.0

alan-agius4 · 2022-09-08T06:49:12Z

The fix for this will be released later today in 14.2.2.

troncomputers · 2022-09-08T08:14:25Z

Update is available and I was able to enable "serviceWorker": true, ✌

julienvonoetinger-eaton · 2022-09-08T09:25:39Z

Same for me ! The issue is gone ! Thanks @alan-agius4 👍

Ruslancic · 2022-09-14T21:50:03Z

I had the same problem too, after updating to 14.2.2, everything disappeared!

P.S Every simple error on my project, triggering this error!

angular-automatic-lock-bot · 2022-10-15T08:04:00Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely severity3: broken devkit/build-angular:dev-server severity5: regression area: @angular-devkit/build-angular and removed severity3: broken labels Sep 2, 2022

alan-agius4 self-assigned this Sep 2, 2022

alan-agius4 added the type: bug/fix label Sep 2, 2022

alan-agius4 mentioned this issue Sep 2, 2022

fix(@angular-devkit/build-angular): handle service-worker serving with localize in dev-server #23849

Merged

clydin closed this as completed in f86b384 Sep 2, 2022

alan-agius4 mentioned this issue Sep 5, 2022

fix(@angular-devkit/build-angular): change service worker errors to compilation errors #23858

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ng serve]: webpack-dev-middleware Error: ENOENT: no such file or directory #23844

[ng serve]: webpack-dev-middleware Error: ENOENT: no such file or directory #23844

ramoncarreras commented Sep 1, 2022 •

edited

Loading

jornare commented Sep 2, 2022

Sergiobop commented Sep 3, 2022

alan-agius4 commented Sep 3, 2022

Sergiobop commented Sep 4, 2022 •

edited

Loading

Sergiobop commented Sep 4, 2022

DadvDadv commented Sep 5, 2022 •

edited

Loading

Sergiobop commented Sep 5, 2022

alan-agius4 commented Sep 5, 2022

sourav-bhar commented Sep 7, 2022

fr20587 commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022 •

edited

Loading

sourav-bhar commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022

troncomputers commented Sep 7, 2022 •

edited

Loading

julienvonoetinger-eaton commented Sep 7, 2022

troncomputers commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022 •

edited

Loading

troncomputers commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022

fr20587 commented Sep 7, 2022

troncomputers commented Sep 8, 2022

julienvonoetinger-eaton commented Sep 8, 2022

alan-agius4 commented Sep 8, 2022 •

edited

Loading

troncomputers commented Sep 8, 2022

julienvonoetinger-eaton commented Sep 8, 2022

Ruslancic commented Sep 14, 2022

angular-automatic-lock-bot bot commented Oct 15, 2022

[ng serve]: webpack-dev-middleware Error: ENOENT: no such file or directory #23844

[ng serve]: webpack-dev-middleware Error: ENOENT: no such file or directory #23844

Comments

ramoncarreras commented Sep 1, 2022 • edited Loading

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

jornare commented Sep 2, 2022

Sergiobop commented Sep 3, 2022

alan-agius4 commented Sep 3, 2022

Sergiobop commented Sep 4, 2022 • edited Loading

Package Version

Sergiobop commented Sep 4, 2022

DadvDadv commented Sep 5, 2022 • edited Loading

Sergiobop commented Sep 5, 2022

alan-agius4 commented Sep 5, 2022

sourav-bhar commented Sep 7, 2022

fr20587 commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022 • edited Loading

sourav-bhar commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022

troncomputers commented Sep 7, 2022 • edited Loading

julienvonoetinger-eaton commented Sep 7, 2022

troncomputers commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022 • edited Loading

troncomputers commented Sep 7, 2022

julienvonoetinger-eaton commented Sep 7, 2022

fr20587 commented Sep 7, 2022

troncomputers commented Sep 8, 2022

julienvonoetinger-eaton commented Sep 8, 2022

alan-agius4 commented Sep 8, 2022 • edited Loading

troncomputers commented Sep 8, 2022

julienvonoetinger-eaton commented Sep 8, 2022

Ruslancic commented Sep 14, 2022

angular-automatic-lock-bot bot commented Oct 15, 2022

ramoncarreras commented Sep 1, 2022 •

edited

Loading

Sergiobop commented Sep 4, 2022 •

edited

Loading

DadvDadv commented Sep 5, 2022 •

edited

Loading

julienvonoetinger-eaton commented Sep 7, 2022 •

edited

Loading

troncomputers commented Sep 7, 2022 •

edited

Loading

julienvonoetinger-eaton commented Sep 7, 2022 •

edited

Loading

alan-agius4 commented Sep 8, 2022 •

edited

Loading