Up to here the Kladde SPA runs with ng serve, a development server on your machine. It reaches people as a folder of static files. This lesson builds the folder, checks it locally, shows three ways to ship it and ends with a decision as an ADR (K4 1.3). Nothing is hosted; the paths in Azure are described from pages of Microsoft Learn.

State of the checks. Ran (Angular 22.2, Node 24.22.3, .NET 10.0.400, copy of the project from 0402): ng build exit code 0; a build with deliberately small budgets exit code 1; the folder browser with serve 14 (MIT, local tool only) with and without a fallback; the test from 0402 against the built folder (3 tests, exit code 0); the run-time configuration with a changed config.json in Chromium; an ASP.NET Core program with MapFallbackToFile (throwaway project, dotnet build exit code 0). Not run: everything in Azure, a container, nginx, staticwebapp.config.json in Static Web Apps, SSR and prerendering, an Aspire AppHost with Angular (open, not read). Statements come from Learn (Static Web Apps, Container Apps "Overview", MapFallbackToFile), angular.dev ("Deployment", "SSR") and nginx.org (try_files), read on the day of writing. Figures on costs are not in the text.

ng build

npx ng build takes the configuration production (default in angular.json): compiled, minified, file names with a checksum. The output of the Kladde (shortened):

Initial chunk files | Names         |  Raw size | Estimated transfer size
main-JAQEW2G7.js    | main          | 261.02 kB |                70.63 kB
styles-O44RJA43.css | styles        |  55 bytes |                55 bytes

                    | Initial total | 261.07 kB |                70.69 kB

Lazy chunk files    | Names         |  Raw size | Estimated transfer size
chunk-CuCrzbSa.js   | buchung       |   2.93 kB |                 1.25 kB

The output is in dist/kladde-angular/; for static hosting the folder browser/ inside it counts (angular.dev: "Copy the dist/my-app/browser/ directory to a web server or content delivery network"). It holds index.html, the bundles and everything from public/. dist/ is in the template's .gitignore.

Budgets let the build fail when the application gets too big. The template sets a warning at 500 kB and an error at 1 MB for the initial bundle. With deliberately small values (100 kB and 200 kB in angular.json) the run looked like this, exit code 1:

▲ [WARNING] bundle initial exceeded maximum budget. Budget 100.00 kB was not met by 161.07 kB with a total of 261.07 kB.
X [ERROR] bundle initial exceeded maximum budget. Budget 200.00 kB was not met by 61.07 kB with a total of 261.07 kB.

Set budgets just above today's state.