Code reloading makes edits visible during Angular development without manually restarting the server or refreshing the browser. Run `ng serve`, change a project file, and save it. The tools detect the change, rebuild the affected bundles, and reload the application in the browser. Here, “hot reloading” means an automatic browser reload, not an update that preserves the running page. section 9.3.2 section 9.7
Check a TypeScript change
Replace `src/main.ts` with `console.log("Hello");` and save it. Open the browser’s F12 developer tools and select Console to see `Hello` alongside messages from the automatic reloading process. Add `console.log("Hello, World");` and save again: the project recompiles, the browser reloads, and both messages appear. section 3.4.1
The first `ng serve` run performs a full build. Afterward, changing a file rebuilds only bundles affected by that file, making feedback quicker. For example, replacing `src/app/app.component.html` with a `Hello, World` div produces a successful build report with three unchanged chunks before the browser displays the edit. The development bundle contains code that connects to the Angular development HTTP server; when a change triggers a build, the server signals the browser to reload. section 9.3.2
Initial Chunk Files | Names | Raw Size runtime.js | runtime | 6.51 kB | main.js | main | 4.39 kB | 3 unchanged chunks Build at: 2023-05-04T07:11:32.801Z - Hash: c9566a8321a0595b - Time: 642ms Compiled successfully.
A build report after the template edit shows the rebuilt chunks and three unchanged chunks; the edit does not require rebuilding every bundle. section 9.3.2
