This example demonstrates how to integrate an Angular 2 application with an enterprise-
y application built using Spring Boot.
The Ingredients:
If you want to hit the ground running, you may directly download the source code from GitHub and follow along.
We will focus on the project structure of the Spring Boot web application. This structure is
the key to rendering the Angular 2 application.
Here are the structures of the Angular 2 project and the Spring Project where this Angular
2 project is copied to.
Boot picks the static resources automatically from the "/src/main/resources/static/" folder. All we need to do is to provide a request handler mapping for our URL, and return the named view (in this example an Angular HTML page). The following controller method does this:
@RequestMapping("/hello")
public String index() {
return "/index.html";
}
Now, the project structure of Spring Boot is slightly different from the Angular 2 application, specially in the location of the "index.html" file. Correspondingly, once we have copied the ang2 directory to the boot demo, we need to edit the "index.html" file and update the references.
If you notice, the URLs have been prefixed with "/ang2/". This is because when deploying the Spring Boot Demo application, the corresponding URL to serve static resources is routed by Boot to the "/static" directory, and hence the relative location of the Angular files are now under "/ang2".<link rel="stylesheet" href="styles.css">
<script src="ang2/node_modules/core-js/client/shim.min.js"></script>
<script src="ang2/node_modules/zone.js/dist/zone.js"></script>
<script src="ang2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="ang2/node_modules/systemjs/dist/system.src.js"></script>
<script src="ang2/systemjs.config.js"></script>
That's it, we are now all set to deploy the application. You can launch the Boot application
as a Java application, it will automatically be deployed in an inbuilt servlet container
(uses Tomcat/tcServer).
The application will be available at http://localhost:8080/hello (uses servlet - the
purpose of this demo), and also at http://localhost:8080/index.html (as it is a static
resource).
Here is how the page should look while it is loading and after it has loaded.