Make front- and backend (Angular 2 and Spring) Maven Multimodule Project

Question

How do I create a Maven multimodule project with a Spring backend and Angular2 front-end? Using spring initializr (https://start.spring.io) and angular cli separately seems to b

Answer 1

The recommended way to build an Angular 2 application is to make use of Angular CLI tool. Similarly when you work with Java EE projects you typically use Maven as the build tool.

To get the best of both worlds you can develop a multi module project as you already figured.

If you would like then just clone this sample:

git clone https://github.com/prashantpro/ng-jee.git

Given the frontend/UI project will be Angular 2 application. Backend project can be Spring or purely Java EE application (Any web app).

We want to take the Angular 2 output (dist directory) and map it into the web application project for the UI part.

Here's how you can do it without any fancy third party plugins. Lets take this Multi module project structure as an example:

cd ng-jee (This is your parent POM project)

.
├── pom.xml
├── ngdemo
│   ├── pom.xml    --- maven pom for angular module
│   ├── dist       --- This will be Angular output
│   ├── e2e
│   ├── karma.conf.js
│   ├── node_modules
│   ├── package.json
│   ├── protractor.conf.js
│   ├── README.md
│   ├── src
│   ├── tsconfig.json
│   └── tslint.json
└── webdemo
    ├── pom.xml
    └── src

The parent pom.xml needs to list both modules. The first module should be the UI (Angular 2) module followed by the Java/Spring module.

The important section is shown below for ng-jee/pom.xml

pom

    ngdemo
    webdemo

Next, if you have created your angular app using CLI like this:

ng new ngdemo

Then you need to place a pom.xml in that same directory ngdemo/pom.xml Having the below build plugins: (This will build the Angular CLI project and generate output in its dist folder.

 
    
        
            org.apache.maven.plugins
            maven-clean-plugin
            3.0.0
            
                false
                
                    
                        .
                        
                            dist/**/*.*
                        
                        false
                    
                
            
        
        
            org.codehaus.mojo
            exec-maven-plugin
            1.5.0
            
                
                    angular-cli build
                    
                        .
                        ng
                        
                            build
                            --prod
                            --base-href
                            "/ngdemo/"
                        
                    
                    generate-resources
                    
                        exec
                    
                
            
        
    

The last piece of the puzzle is to reference this ngdemo/dist folder so we can copy the output into our WAR file.

So, here's what needs to be done in webdemo/pom.xml

 
    
        
            src/main/resources
        
    
    
        
            org.apache.maven.plugins
            maven-war-plugin
            2.3
            
                false
                
                    
                        
                        ../ngdemo/dist/
                    
                
            
        
    

Now, if you build the project from the parent directory ng-jee

mvn clean install

Then you will see that first it builds the Angular project then Web Project, while doing the build for the latter it also copies the Angular dist contents into the Web projects root.

So you get something like the below in the WAR/Web project target directory:

/ng-jee/webdemo/target/webdemo-1.0-SNAPSHOT.war

.
├── favicon.ico
├── index.html
├── inline.d72284a6a83444350a39.bundle.js
├── main.e088c8ce83e51568eb21.bundle.js
├── META-INF
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
├── vendor.fb5e0f38fc8dca20e0ec.bundle.js
└── WEB-INF
    └── classes

That's it. I will be doing a series on few of these aspects and more here Angular and JEE

Till then hope this helps!