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 be straightforward, but how do I organize that as a multi-module Maven project with linked but separate pom-files? With what values and in what order should I create and initialize those? I can use Intellij IDEA if it makes things easier, but i am also fine with CMD (I'm on windows).

The only tutorial I found on this is here: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ but the guy uses some self-written "frontend-maven-plugin" which I do not want. Can someone explain the steps or link me to a tutorial that doesn't use third-party-resources but just clean Spring and Angular2, please?

EDIT: when I posted this question, WebDevelopment was for the most part new to me. The below solution worked at the beginning, but for better scalability we decided to make separate projects later on: one FE project containing multiple Angular apps and many FE-libs (check out NRWL's NX for that). And one project for each BE-Microservice, each deployable separately in the CI-Pipelines. Google themselves go with the approach of one project for all the FEs and BEs, but they do have special requirements (all libs have to work with each other in the latest version) and they use the ABC-stack (Angular + Bazel + Closure) stack for that, which is not yet fully available for the public, but is worth keeping an eye on: https://github.com/angular/angular/issues/19058

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

<packaging>pom</packaging>
<modules>
    <module>ngdemo</module>
    <module>webdemo</module>
</modules>

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.

 <build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-clean-plugin</artifactId>
            <version>3.0.0</version>
            <configuration>
                <failOnError>false</failOnError>
                <filesets>
                    <fileset>
                        <directory>.</directory>
                        <includes>
                            <include>dist/**/*.*</include>
                        </includes>
                        <followSymlinks>false</followSymlinks>
                    </fileset>
                </filesets>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.5.0</version>
            <executions>
                <execution>
                    <id>angular-cli build</id>
                    <configuration>
                        <workingDirectory>.</workingDirectory>
                        <executable>ng</executable>
                        <arguments>
                            <argument>build</argument>
                            <argument>--prod</argument>
                            <argument>--base-href</argument>
                            <argument>"/ngdemo/"</argument>
                        </arguments>
                    </configuration>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

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

<build> 
    <resources>
        <resource>
            <directory>src/main/resources</directory>
        </resource>
    </resources>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.3</version>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
                <webResources>
                    <resource>
                        <!-- this is relative to the pom.xml directory -->
                        <directory>../ngdemo/dist/</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>
    </plugins>
</build>

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!