Below are the steps I followed:-
- First, I installed Nodejs v6.9+
- Next, I ran npm install @angular/cli –g to install Angular CLI
- Then, I either installed Apache Maven or used a Maven friendly IDE
- I set up my required Maven configuration, opting for a simple webapp (WAR).
Directory Structure (The structure follows the standard Maven layout except for the ngapp folder.)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
Angular Component
To begin with the Angular setup, navigate to the ngapp folder in the terminal and execute the ng init command. This will initialize the node and npm configuration, resulting in an example Angular2 application structured as follows within the 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 mirrors the Maven project layout, with the src directory housing the source code of the Angular Application. Similar to how the maven build command generates output in the target folder, the ng build command outputs to the dist folder.
To include the generated Angular application within the Maven-built WAR file, adjust the build configuration to change the output directory from dist to webapp. Open the angular-cli.json file and modify the outDir as shown below:-
"outDir": "../webapp/ng"
With this setting, running the ng build command will place the built Angular Application inside the ng directory of ngfirst/src/main/webapp.
Maven Configuration
Edit the pom.xml file and configure the following three maven plugins:-
- compiler-plugin: Exclude any Java compilation tasks in /src/main/ngapp by specifying an exclusion.
- war-plugin: Since /src/main/ngapp is an Angular project folder, exclude it from the WAR packaging process.
- exec-plugin: Use this plugin to execute NPM Install and Angular-CLI Build commands for generating the Angular Application in the webapp folder prior to packaging. Ensure to include the --base-href argument to load Angular resources correctly from the webapp's context path.
The plugin configurations should look like this:-
<plugins>
<plugin>
...
</plugins>
Building the Maven Project (and the Angular App)
In the project root folder ngfirst, open Terminal and run the mvn package command to generate a WAR file (ngfirst.war) in the target folder.
Deploy the ngfirst.war file in a container, then access http://localhost:8080/ngfirst/ng/index.html in your browser. Make sure to adjust the hostname and port if needed.
If all goes well, you should see app works! displayed in the browser, indicating that the Angular Application is functioning correctly.
JSP Integration
You can combine the dynamic capabilities of JSP technology with the Angular application. By configuring the JSP Engine to pre-process html files, all JSP functionalities can be integrated into the Angular SPA Page. Include the following snippet inside the web.xml file:
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
After saving and rebuilding the Maven project, deploying the WAR file will enable the JSP magic on your Angular SPA Page.