Building a Java Angular application tutorial and best practices

Updated:

In this page I try to describe step-by-step what is needed to build a fullstack application with Java (Spring Boot) and Angular.

This is a minimalistic approach that is running successfully in production in some international companies. There are multiple approaches and architecture possible and there is no 'best solution' only solutions that work best in your context.

This is a permanent work in progress project, I'll add links and video and update them.
For any suggestion or contribution you can contact me.

The basis of your application

SubjectDescriptionBlogVideos
IDE choice TBDTBD
IDE configurationSome plugins that I usually use to simplify my workflowTBDTBD
Deploy Angular with Spring Boot in the same executable JAR / WARFrontend copied inside of backendAngular with Java
Deploy Angular with Spring Boot in the same executable JAR / WAR (3 tier)Frontend, backend and delivery are separatedDeploy Java Angular One
Deploy your application in Docker Deploy Spring in Docker
Fix the 404 error when refreshing the Angular page in a Java application fix 404 error
Fix CORS error fix CORS error
Fix Whitelabel error fix Whitelabel error
OpenAPI generator OpenAPI generator

Angular specific steps

StepsDescriptionBlogVideos
Angular, Typescript and Node version compatibility matrixWhich version of Node.js and Angular are compatible?https://marco.dev/angular-typescript-node
Node and Angular Setup using NVM (Linux) https://marco.dev/angular-docker-linux
Dev Server configurationConfigure multiple environments and add a proxyDev server configuration
Test with Cypress Angular with Cypress and Java
Allow public access to the Angular Dev Server during the development External access to the dev server
Deploy Angular with Docker and NGINX Deploy with docker and nginx
Common errors Common errors

Angular UI (optional)

DescriptionBlogVideos
Display a tooltip on a disabled button Material Tooltip
File upload File Upload tutorial
How to store user information between sessions in a Cookie in Angular angular-cookie
Send an image from the Java backend to Angular using REST services Send an image from the Java backend to Angular
Export your data to CSV using Typescript export your data to CSV using Typescript
Enums in Angular Template how to use enums in the template
Right click menu Right click menu
Repeat an HTTP request every x seconds / minutes Repeat HTTP request
Angular best components Best components
Angular Material: sort complex objects using MatTableDataSource MatTableDataSource
Unsaved changes warning in Angular https://marco.dev/angular-save-on-exit
Fix: CommonJS or AMD dependencies can cause optimization bailoutsRemove moment.jshttps://marco.dev/angular-momentjs-warning
Crazy: Add Angular (Web Component) to an existing websiteAngular Elements using 2D canvashttps://marco.dev/angular-rxjs-examples

Java / Spring Boot specific steps

DescriptionBlogVideos
Configure the Java Virtual Machine for Docker Java Docker Setup
SpringBoot best practices Best practices
Autoconfiguration package and the missing JPA Entities JPA in modules
How execute code when your Spring Boot application starts @PostConstruct and @PreDestroy
Organise and tests the exceptions using ControllerAdviceCentralise the Exception Managementhttps://marco.dev/rest-controller-advice
Deploy your app with Docker Deploy Spring Boot with Docker
Generate a Sitemap Generate a sitemap.xml
Execute code at startup Code at startup
Hot deployment during development Hot redeploy
Override Maven dependenciesUseful when you are blocked by CVEhttps://marco.dev/maven-override-dependency

Spring Boot testing

DescriptionBlogVideos
Override properties in your test classesOverride properties defined in .properties in your test classhttps://marco.dev/spring-test-properties
Liquibase with Spring for your tests Update your database
Data Tests with H2 H2 with Spring Boot and JPA
Test @RestController Test @RestController
How to test our REST services Test REST in SpringBoot

You could be interested in

logo of the category: spring-big.svg Spring Boot: REST controller Test example

How to test the @RestController with Spring Boot
2017-10-01

logo of the category: spring-big.svg How to deploy a Java and Angular webapp in one JAR/WAR

How to configure a fullstack Angular and Spring Boot application
2018-04-26
WebApp built by Marco using SpringBoot 3 and Java 21. App hosted in Switzerland.