An Angular app is served by a different host than a Spring Boot API, so reaching for data via REST API will result in the following error: “Failed to load http://localhost:8080/api: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.” Read this post to learn how to configure Cross-origin resource sharing (CORS) to enable the cross-domain communication on a development environment.
In a multi module application Spring Boot should surrender routing control to Angular, otherwise trying to access any route other than the root page will result in a Whitelabel Error Page: “There was an unexpected error (type=Not Found, status=404)”
Developing a multi-module application where the backend runs on Spring Boot and the frontend is powered by Angular is far less complicated than one might expect. Check out how you can build such a project and manage it as a single jar file.
Separating the business logic from the presentation layer can save you a lot of headache during project maintenance. Unless the frontend is managed with a framework like Angular or Vue.js you should use a template engine. Check out how to utilize jtwig in a Spring Boot project.
With Spring Initializr you can bootstrap a new Spring Boot application swiftly. Let’s create a fresh project from scratch using just Web and MySQL dependencies.