Hello to Angular 2 with Spring Boot

This example demonstrates how to integrate an Angular 2 application with an enterprise- y application built using Spring Boot.

The Ingredients:


The Recipe:

This project aims to integrate the above two ingredients using the following steps:
  1. Create (build and compile) the Angular 2 project as a standalone application.
  2. Create a simple web application using Spring Boot.
  3. In the Spring web application, provide configuration to route requests to serve content from a static resource.
  4. ​Copy the Built Angular 2 application to Spring's static resource folder/directory.
  5. Update file relative paths
  6. Build -> Deploy -> Run

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.