-2

When I run ng serve, everything seems to work except for one small issue, the main.js file in the dist folder does not change when the automatic build occurs as I change one of the component ts files.

When I run ng build, the changes I've made to my ts files DO clear out the dist folder and replace it with the correct main.js file.

I would have thought that ng serve uses ng build under the hood, but it's not in my case.

Any help on what I can look for would be appreciated.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Dennis
  • 31
  • 9
  • 1
    `ng serve` creates a temporary build and stores in memory, whereas `ng build` creates a production build. What is it you are looking for with `ng serve`? – PsyGik Jul 08 '21 at 13:32
  • @PsyGik I'm having a major problem with caching, and when I look in the dev tools I'm seeing my old code unless I use ng build – Dennis Jul 08 '21 at 14:41
  • You can run `ng build --watch` to create a build when you change files, if that's what you are after. – PsyGik Jul 08 '21 at 14:43

2 Answers2

1

The ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.

The ng build command is intentionally for building the apps and deploying the build artifacts.

You should check this SO link, there are very good answers in details to understand it in more depth.

Apoorva Chikara
  • 8,277
  • 3
  • 20
  • 35
  • Thanks for that, but according to that link "Both commands ng build and ng serve will clear the output folder before they build the project." this is NOT happening for me. – Dennis Jul 08 '21 at 14:42
  • If I have `ng build --watch` in one terminal and `ng serve` in another terminal, it all works as it should, so it seems my client files are coming from the `dist` folder rather than memory. That link did help a bit though, thanks again – Dennis Jul 08 '21 at 15:02
  • Dist folder is for distribution as the name suggest and local build is served differently. It seems be a caching issue may be. Which angular version are you using btw? – Apoorva Chikara Jul 08 '21 at 15:22
  • Angular CLI 11.2.8, Angular 11.2.9, however my colleague, on the same versions, with same code, does not have this problem – Dennis Jul 08 '21 at 16:16
1

I have found a solution but no idea why this works and happy to hear better answers:

I had to run:

ng build --output-hashing all

once per repo folder

Thereafter ng serve correctly picks up my changes and reflects them in Chrome dev tools.

Dennis
  • 31
  • 9
  • It is becauSe it adds the hash to the file name. Definitely, you are having issues with the caching on your local server. – Apoorva Chikara Jul 08 '21 at 16:19
  • I also now delete the `dist` folder and press `Ctrl-F5` on my browser and `ng-serve` seems to work fine for me now. – Dennis Aug 19 '21 at 21:22