3
votes

My front end application is built with Angular 11 using material components and the backend is written in spring boot. The majority of the UI is written as angular components but there are some pages that I want build on the server side. For example, if the user clicks on a confirm email link I want to launch them into a server side generated page that displaying successful email confirmation message. I want the server side generated pages from Spring Boot Thymeleaf to look and feel and same as the angular material pages.

I have heard about Angular Universal but the backend is written in Java and I want to avoid adding NodeJS to the backend tech stack if possible. I am also new to frontend development this is my first app.

I figured I can reuse the angular material typography styles to at least have the same fonts but I am not sure how I can get the same layout as @angular/flexlayout to keep a consistent look and feel.

What startegies can be used to ensure a consistent look and feel between angular material on the client side and server side generated pages using Thymeleaf or non JavaScript based server side rendering frameworks?

I've dealt with similar just constructing a simple maintenance page that was pure html. Since my design was fairly limited I just implemented some of the same style typical of a mat-card, such as box-shadow. You could similarly role your own style sheet to give a similar look and feel or pull from material design resources material.io/develop/web/docs/getting-started - robbieAreBest