Configure angular 2 project with maven and spring REST

Question

I wanted to upgrade my small application from angular 1 to angular 2. I am somewhat new to angular 2 and node configurations. My web application use eclipse and maven. The problem is i could not able to configure using angular 2.

What directory structure should I use?

There are maven plugins available but i am bit confused about the directory structure of my angular 2 app.

Answer 1

Here is what I did:-

• Install Nodejs v6.9+
• Run npm install @angular/cli –g for Angular CLI
• Install Apache Maven or use any Maven friendly IDE
• Use your required Maven configuration, I used simple webapp (WAR).

Directory Stucture (Except for ngapp folder rest is standard Maven structure.)

ngfirst
├── pom.xml
├── src
│   └── main
│       ├── java
│       ├── resources
│       ├── webapp
│       └── ngapp

Angular Part

Open ngapp folder in terminal and type ng init command to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-

             ├── angular-cli.json
             ├── e2e
             ├── karma.conf.js
             ├── node_modules
             ├── package.json
             ├── protractor.conf.js
             ├── README.md
             ├── tslint.json
             ├── src
                 ├── app
                 ├── assets
                 ├── environments
                 ├── favicon.ico
                 ├── index.html
                 ├── main.ts
                 ├── polyfills.ts
                 ├── styles.css
                 ├── test.ts
                 └── tsconfig.json

This structure is Angular equivalent of Maven project structure and src directory is Angular Application's source, just like maven build command generates its output in target folder, ng build command generates its output in dist folder.

In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from dist to webapp, open angular-cli.json file and modify its outDir as below:-

"outDir": "../webapp/ng"

At this point ng build command will generate built Angular Application inside ng directory of ngfirst/src/main/webapp folder.

Maven Part

Open pom.xml and configure following three maven plugins:-

1. compiler-plugin: No Java stuff to compile in /src/main/ngapp folder, exclude it.
2. war-plugin: /src/main/ngapp is Angular project folder and it should not be packaged in WAR, exclude it.
3. exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Argument --base-href is required to load Angular resources from webapp's context path.

Here is how it should look like:-

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.5.0</version>
        <executions>
            <execution>
                <id>exec-npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>exec-npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>ng</executable>
                    <arguments>
                        <argument>build</argument>
                        <argument>--base-href=/ngfirst/ng/</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>  

Building Maven Project (and Angular App too)

Open Terminal in project root folder ngfirst and run mvn package command, this will generate a WAR file (ngfirst.war) in target folder.

Deploy ngfirst.war in a container, open http://localhost:8080/ngfirst/ng/index.html in Browser. (adjust your hostname and port if required)

If everything went right, you should see app works! in browser, that is Angular Application at work!!

JSP Pre-Processing

We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.html in this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml

<servlet-mapping>
    <servlet-name>jsp</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>

Save, rebuild maven project, deploy WAR and voila!!

Answer 2

Here from the angular site shows several demonstrations of how to structure an angular 2 project. In an eclipse maven web app I would start my client side files into the src/main/resources folder at the same level as the web-inf folder.

Maven pom.xml, include this into your project. Maven-fronted-plugin shouldn't be used for production. Maven will install two folders at the project root level with this setup, node and node_modules.

<build>
   <plugins>    
        <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v5.3.0</nodeVersion>
                            <npmVersion>3.3.12</npmVersion>
                        </configuration>
                    </execution>

                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <!-- Optional configuration which provides for running any npm command -->
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
    </plugins>
</build>

package.json add this to the root level of the project before maven clean install.

{
  "name": "budget_calculator",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  }
}