how to integrate Angular 2 + Java Maven Web Application
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
-
<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.3</version> <configuration> <nodeVersion>v10.13.0</nodeVersion> <npmVersion>6.4.1</npmVersion> <workingDirectory>src/main/ngapp/</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> </execution> <execution> <id>npm run build-prod</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> <execution> <id>prod</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run-script build</arguments> </configuration> <phase>generate-resources</phase> </execution> </executions> </plugin>讨论(0) -
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 installandng 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)
<build> <resources> <resource> <directory>dist</directory> </resource> </resources> <plugins> <!-- skip compile --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <executions> <execution> <id>default-compile</id> <phase /> </execution> </executions> </plugin> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <executions> <execution> <id>exec-npm-install</id> <phase>generate-sources</phase> <configuration> <workingDirectory>${project.basedir}</workingDirectory> <executable>npm.cmd</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</workingDirectory> <executable>ng.cmd</executable> <arguments> <argument>build</argument> <argument>--no-progress</argument> <argument>--base-href=/app/ng/</argument> <== to update </arguments> </configuration> <goals> <goal>exec</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <configuration> <archive> <addMavenDescriptor>false</addMavenDescriptor> <manifest> <addClasspath>false</addClasspath> </manifest> </archive> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-shade-plugin</artifactId> <executions> <execution> <phase>package</phase> <goals> <goal>shade</goal> </goals> <configuration> <filters> <filter> <artifact>*:*</artifact> <excludes> <exclude>META-INF/</exclude> </excludes> </filter> </filters> </configuration> </execution> </executions> </plugin> </plugins> </build>prj war (pom.xml extract)
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <executions> <execution> <id>unpack angular distribution</id> <phase>generate-resources</phase> <goals> <goal>unpack</goal> </goals> <configuration> <artifactItems> <artifactItem> <groupId>com.myapp</groupId> <== to update <artifactId>prj-angular</artifactId> <== to update <overWrite>true</overWrite> <includes>**/*</includes> </artifactItem> </artifactItems> <outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update <overWriteReleases>true</overWriteReleases> <overWriteSnapshots>true</overWriteSnapshots> </configuration> </execution> </executions> </plugin>讨论(0) - it uses maven-exec-plugin to call
-
Funnily enough, I did just this last week!
Using Netbeans 8.1 and a Tomcat servlet version 8.0.27
Angular and Java project file structure.
Java Project is called Foo. Angular Project is Bar
Foo (Java Maven Project) |__ src | |__ main | | |__ webapp (This folder contains the entire Angular Project) | | | |__ META-INF | | | | \__ context.xml | | | |__ WEB-INF | | | | \__ web.xml | | | |__ includes | | | | |__ css | | | | |__ images | | | | \__ js | | | | | | | | ## Bar project files are located here ## | | | | | | | |__ app | | | | \__ All .ts and compiled .js files are located here | | | |__ node_modules | | | | \__ any dependencies used for Bar are located here | | | |__ typings | | | | \__ typings for Typescript located here | | | | | | | |__ README.txt | | | |__ index.jsp | | | |__ package.json | | | |__ systemjs.config.js | | | |__ tsconfig.json | | | |__ typings.json | | | \ ## Bar project files end here | | | | | |__ resources | | | |__META-INF | | | | \__ persistence.xml | | |__ java | | | |__ hibernate.cfg.xml | | | |__ com | | | | |__ orgName | | | | | |__ packageName | | | | | | \__ .java files are here |__ pom.xml \__ nb-configuration.xml讨论(0) -
I recommend let the two applications separated, this way you have modularity. This way you can change the Angular App without affect your service, and vice versa. For second, your apache/nginx are faster to deliver your js and html from Angular instead Tomcat (for example). But if you still want put the Angular application inside the war, the pattern is that all web resources are in src/main/webapp.
讨论(0) -
I want to share how I set my Angular/Java projects. Some important things:
There's only a single Maven project and it allows me to build the entire project. In this way, I can build the entire project or build client and backend separately.
My project is based on Spring Boot framework. However, you can easily adapt my solution to your situation. I generate the
outputcode of Angular project is put under the `META-INF' folder. You can obviously change it if you don't use Spring Boot.In my project, I want to publish the angular project in the
publicfolder.When I develop, I run the Angular project and the backend project separately: Angular with
ng serveand the backend project (the Java part) in the IDE (Eclipse).
Ok, let's start. The entire project structure is represented in the following picture.
As you can see, I put the Angular project in the 'src\main\ngapp' folder. For the Java project (the backend) I used Eclipse IDE, for the Angular project I used Webstorm. You can choose your preferred IDE to manage the project. The important thing: you will need two IDE to manage the entire project.
To build the Angular project with Maven, I used the following maven profile definition.
<profile> <id>build-client</id> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.3</version> <configuration> <nodeVersion>v10.13.0</nodeVersion> <npmVersion>6.4.1</npmVersion> <workingDirectory>src/main/ngapp/</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> </execution> <execution> <id>npm run build-prod</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> <execution> <id>prod</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run-script build</arguments> </configuration> <phase>generate-resources</phase> </execution> </executions> </plugin> </plugins> </build> </profile>As you can see, I used the
com.github.eirslett:frontend-maven-pluginplugin to install node and run npm to build the Angular project. In this way, when I run the maven profilebuild-clientThe plugin is used to:Check and install, if it is needed, the node version
v10.13.0in the Angular project foldersrc/main/ngapp/Run the command
npm run build. In the Angular project is defined the build alias in thepackage.json
"scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", "build": "ng build --configuration=production", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }The Angular client must be place in
publicfolder of the web application. To do this, the Angular project is configured to have thebaseHref=/public. Moreover, the builded project must be place insrc/main/resources/META-INF/resources/public. Inangular.jsonyou will find:"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "baseHref":"/public/", "outputPath": "../resources/META-INF/resources/public", ...In a no-Spring Boot project you probably need to put the builded angular project directly in
src/main/webapp/publicfolder. To do this, just modify theangular.jsonfile as you need.You can find all the project's code in my github project. The plugin project is here.
讨论(0) -
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 │ └── ngappAngular 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.jsonThis 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:-
- compiler-plugin: No Java stuff to compile in /src/main/ngapp folder, exclude it.
- war-plugin: /src/main/ngapp is Angular project folder and it should not be packaged in WAR, exclude it.
- exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Note --base-href argument, it 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!!
讨论(0)
加载中...
- 热议问题