`wails dev` results in a `read/write on closed pipe` error during front end dependency installation

[Insulince]

Brand new fresh instance of the template results in the following. Running wails dev at different verbosity levels had no effect on the output.

Note that I have not had this happen with the other two templates I have attempted, plain and vanilla-ts, which admittedly both are much simpler templates than this one.

I am on an Intel Mac.

[Insulince]

Also worth noting that simply doing from a terminal:

cd frontend
npm install

completes without error, which is what I assume this step is doing. But this doesn't help make the app start or anything.

[nasuadachi]

Same condition. wails build works fine. After wails dev, I wait for 2 hours and it does not start. (;_;) (M1 mac mini)

[Insulince]

After a bit of digging I found the following.

This is in the official wails repository (here):

This implies that the frontend:install command used in wails.json is ignored when a frontend:dev command is present (which it is for this template).

Removing that command entirely from the wails.json allows it to compile successfully, however I don't know what impact this has on the template as a whole (does this remove hot reloading? slower compile times? other unfavorable effects?).

[Insulince]

So... frontend:dev executes npm run watch which executes ng build --watch --configuration development --delete-output-path false --output-hashing none.

Which, because of the --watch flag, never exits. But if this command never exits, then wails thinks it's still installing dependencies forever (@nasuadachi, this may be why your app hangs for 2 hours). I think this is the crux of the problem.

But we still want the --watch flag so that we get hot reloading. We just don't want this command to be used when it should be installing dependencies.

[RaederDev]

Hi I ran into a lot of issues making this work for Angular 17 and wanted to share my working configuration here. In wails.json in addition to the changes made in the PR I had to add reloaddirs that watch the .angular folder.

  "assetdir": "frontend/dist",
  "frontend:build": "npm run build",
  "frontend:install": "npm install",
  "frontend:dev": "npm run build:dev",
  "frontend:dev:watcher": "npm run watch",
  "wailsjsdir": "./frontend",
  "reloaddirs": "./frontend/dist,./frontend/.angular",

I changed the scripts section of package.json to this:

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production --output-hashing none",
    "build:dev": "ng build --configuration development",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Now wails dev works for me and reloads the application when a change is detected. I don't know if this is the ideal solution but so far it seems to work.