Compatibility Fixes for Angular 18+, Node 22, and Spring Boot 3.x integration #43
Description
Description
The current tutorial is a fantastic resource for Spring/Angular integration, but following it today with the latest versions of Node (v22+) and Angular (v18+) leads to several "silent" failures. Below are the three critical areas that require updates to maintain a "Single Project" (unified) structure.
1. Build Tooling (frontend-maven-plugin)
Problem: Older versions of the plugin (v1.12.0) struggle with Node 22 and Windows 11 file permissions. Additionally, Angular 18+ requires Node 18.20+ or 20.x+.
The Fix: Update frontend-maven-plugin to v1.15.0 and set nodeVersion to at least v20.x or v22.x. When in doubt about node version, just run npm --version in your browser.
2. Directory Structure & Static Resource Mapping
Problem: The new Angular "Application Builder" introduces a /browser sub-directory in the dist (or target) output.
Symptom: Spring Boot serves a 404 on localhost:8080 because it expects index.html at the root of static/, not in static/browser/.
The Fix: Update angular.json to explicitly flatten the output path:
"outputPath": {
"base": "target/classes/static",
"browser": ""
}3. Change Detection & Hydration (The "Signals" Shift)
Problem: Modern Angular projects enable SSR (Server-Side Rendering) and Hydration by default. When served as static resources via Spring Boot, the "Hydration" process often fails or mismatches, preventing the UI from updating when the backend responds (even if the Network tab shows a successful 200 OK for /resource).
The Fix: Recommend creating the project with --ssr false.
Transition from traditional Zone.js observation to Angular Signals for the data-fetching logic. This ensures the UI updates immediately when data.set(response) is called, even in a static build environment.