how to integrate Angular 2 + Java Maven Web Application

Question

I have created a Angular 2 front-end Application.and i have created one Java Rest WS Back-end Application which is connected to DB.

My Folder structure for Angular 2

Answer 1

I want to share how I set my Angular/Java projects. Some important things:

1. There's only a single Maven project and it allows me to build the entire project. In this way, I can build the entire project or build client and backend separately.

2. My project is based on Spring Boot framework. However, you can easily adapt my solution to your situation. I generate the output code of Angular project is put under the `META-INF' folder. You can obviously change it if you don't use Spring Boot.

3. In my project, I want to publish the angular project in the public folder.

4. When I develop, I run the Angular project and the backend project separately: Angular with ng serve and the backend project (the Java part) in the IDE (Eclipse).

Ok, let's start. The entire project structure is represented in the following picture.

As you can see, I put the Angular project in the 'src\main\ngapp' folder. For the Java project (the backend) I used Eclipse IDE, for the Angular project I used Webstorm. You can choose your preferred IDE to manage the project. The important thing: you will need two IDE to manage the entire project.

To build the Angular project with Maven, I used the following maven profile definition.

    build-client

    
        
            
                com.github.eirslett
                frontend-maven-plugin
                1.3
                
                    v10.13.0
                    6.4.1
                    src/main/ngapp/
                
                
                    
                        install node and npm
                        
                            install-node-and-npm
                        
                    
                    
                        npm install
                        
                            npm
                        
                    
                    
                        npm run build-prod
                        
                            npm
                        
                        
                            run build
                        
                    
                    
                        prod
                        
                            npm
                        
                        
                            run-script build
                        
                        generate-resources
                    
                
            
        
    

As you can see, I used the com.github.eirslett:frontend-maven-plugin plugin to install node and run npm to build the Angular project. In this way, when I run the maven profile build-client The plugin is used to:

• Check and install, if it is needed, the node version v10.13.0 in the Angular project folder src/main/ngapp/

• Run the command npm run build. In the Angular project is defined the build alias in the package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

The Angular client must be place in public folder of the web application. To do this, the Angular project is configured to have the baseHref=/public. Moreover, the builded project must be place in src/main/resources/META-INF/resources/public. In angular.json you will find:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref":"/public/",
    "outputPath": "../resources/META-INF/resources/public",
    ...    

In a no-Spring Boot project you probably need to put the builded angular project directly in src/main/webapp/public folder. To do this, just modify the angular.json file as you need.

You can find all the project's code in my github project. The plugin project is here.