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

My side I have a maven module for angular sources called prj-angular, and anoter one for war application called prj-war.

first prj angular is built:

• it uses maven-exec-plugin to call npm install and ng build (thanks to @J_Dev!)
• change resource default directory to dist/
• skip jar MANIFEST generation
• maven module result: a jar with generated angular dist/ content only!

then, second prj_war is build:

• has prj angular as dependency
• use unpack phase to unzip the previous jar into web app destination
• this module build you app war with fresh angular dist.

Follow under the corresponding plugin configuration I used:

prj angular (pom.xml extract)

    
        
            dist
        
    
    
        
        
            org.apache.maven.plugins
            maven-compiler-plugin
            
                
                    default-compile
                    
                
            
        
        
            org.codehaus.mojo
            exec-maven-plugin
            
                
                    exec-npm-install
                    generate-sources
                    
                        ${project.basedir}
                        npm.cmd
                        
                            install
                        
                    
                    
                        exec
                    
                
                
                    exec-npm-ng-build
                    generate-sources
                    
                        ${project.basedir}/src
                        ng.cmd
                        
                            build
                            --no-progress
                            --base-href=/app/ng/ <== to update
                        
                    
                    
                        exec
                    
                
            
        
        
            org.apache.maven.plugins
            maven-jar-plugin
            
                
                    false
                    
                        false
                    
                
            
        
        
            org.apache.maven.plugins
            maven-shade-plugin
            
                
                    package
                    
                        shade
                    
                    
                        
                            
                                *:*
                                
                                    META-INF/
                                
                            
                        
                    
                
            
        
    

prj war (pom.xml extract)

        
            org.apache.maven.plugins
            maven-dependency-plugin
            
                
                    unpack angular distribution
                    generate-resources
                    
                        unpack
                    
                    
                        
                            
                                com.myapp <== to update
                                prj-angular <== to update
                                true
                                **/*
                            
                        
                        ${project.build.directory}/prjwar/ng <== to update
                        true
                        true