Angular HMR and ReactJS hot reload are not working in WSL2

[ngnlx]

• Your Windows build number: Microsoft Windows [Version 10.0.19025.1]

• I have created Angular 8 app by Angular CLI and ReactJS app by create-react-app. I'm able to run apps through commands: ng serve (for Angular app) and npm start (for ReactJS app). I can view the website is hosted but If I make changes in the source code, changes cannot appear in the hosted website.

[craigloewen-msft]

@andres-iniesta are you running your project from your C drive or from your Linux root file system?

Could you try running the project in your Linux root file system and seeing if that fixes your problem?

[ngnlx]

@craigloewen-msft

The issue found when I try to run the app from C drive. But it's working if I run the project from Linux root file system as you're mentioned.

[craigloewen-msft]

We need to add file watch capabilities to the Plan9 server that serves files to a WSL2 distro, and we're tracking that work item here: #4739 .

I still have it as an item on my plate to add better notes about this to our documentation and will aim to do so. For the future please try to run your Linux apps from your Linux root file system!

I'll close this issue out as a duplicate, but please feel free to comment if you have any more questions. :) Thanks for filing!

EDIT: Updated landing zone from #4064 to #4739

[Soviut]

A workaround for anyone using Webpack or other tool that uses Chokidar under the hood; you can set an environment variable to use polling instead of listening for file events.

CHOKIDAR_USEPOLLING=1

I use this with Docker by putting it in a .env file that Docker Compose picks up when it starts. However, you should be able to prepend any start commands with this env as well.

CHOKIDAR_USEPOLLING=1 npm start

This isn't a great solution since it dramatically increases the resources the OS or Docker needs to consume in order to perform the polling and it will drain your laptop batteries way faster than actual file system event watching, but it works until WSL2 triggers those file system events.

[hakpk5]

@andres-iniesta are you running your project from your C drive or from your Linux root file system?

Could you try running the project in your Linux root file system and seeing if that fixes your problem?

Running from the Linux root file system works fine, I also got caught up with this problem a couple of hours ago today.

Other information down below might help

lsb_release -a

Distributor ID: Ubuntu
Description:    Ubuntu 20.04 LTS
Release:        20.04
Codename:       focal

ng version

Angular CLI: 15.0.4
Node: 18.12.1
Package Manager: npm 8.19.2
OS: linux x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1500.4 (cli-only)
@angular-devkit/core         15.0.4 (cli-only)
@angular-devkit/schematics   15.0.4 (cli-only)
@schematics/angular          15.0.4 (cli-only)