How to setup angular 4 inside a maven based java war project

generate war file from angular project
maven angular
angular 5 war file
angular deployment with spring boot jar packaging
how to deploy angular 4 app in websphere
angular 2 spring mvc maven
dist to war
frontend-maven-plugin

I'm becoming a bit crazy because I can't find a guide to setup an angular 4 app inside a java war project that will be built with maven. This is because I want to run it into a wildfly server.

Any help?

Thanks

How to Pack Angular 8 Applications on Regular War Files, In this article, we discuss how to pack Angular 8 applications on war Allows you to combine Java(Maven) and JavaScript(Webpack) build systems. Allows you to distribute a minified and ready for production project. inside our source code structure and bootstrap the Angular project. <configuration>. In this article, I want to show how you can set up a parent Maven project which includes an Angular and Spring Boot child, which will be deployed on a Tomcat server, including a production-ready

I have a similar issue : I have a maven web application module named Tourism-Services containing the web services and a maven project containing the angular project (I created the angular project with CLI in the src/main/angular5/tourism folder)

contrary to this post and accordingly to the following link (how to integrate Angular 2 + Java Maven Web Application) that was given by Parth Ghiya, I think that The angular project should be placed in the webapp folder of Tourism-Services module project. Considering this I have further questions :

  1. Normally, all the compilation result in dist folder should be placed under webapp folder. But in dist folder, there are not all the Angular project ressources (as images, css that should be present in angular assets folder, am I right ?)

  2. Considering the angular dependencies that are in node_modules, should we integrate them also in webapp folder ? There is one obstacle : first there are Typescript files and sould be also compiled to be interprated by the server, but maybe there are compiled and added when they are imported in the custom application angular files ? What is the solution ?

  3. Should we includes other type of ressources coming from the angular project in webapp folder ? (like typings folder as suggested Scrambo in the above link post)

Deploy Angular Maven WebApp on Tomcat, I had similar requirement to have one source project which has java web-​services project as well as angular project(an angular-cli based  Maven JavaEE Angular2 Template. Template project for using Angular2 inside an JavaEE WAR. The template is based on the Angular Tutorial and comes with two preconfigured Maven profiles: default: Angular development mode for ease of development and fast recompile/deploy (+-1sec) aot-compile: Ahead of Time compilation for performance optimization

I tried those instructions and other articles. those are great however it is a bit ambiguous. So someone who doesn't get it at once .. checks this.

GitHub

Follow the below instructions..

  1. Add your angular project under java project. My angular project name is tdf

2.open app.module.ts (in your angular project/src/app/app.module.ts) Add import and providers

import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';

      providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
      ],

3.open package.json (angularproject/package.json) add "build": "ng build --prod" like below

{
  "name": "tdf",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
     **"build": "ng build --prod",** //change like this
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

4.update your pom.xml -add forntend maven plugin -add ng build directory

      <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
          <modelVersion>4.0.0</modelVersion>

          <groupId>angular</groupId>
          <artifactId>angular7java</artifactId>
          <version>0.0.1-SNAPSHOT</version>
          <packaging>war</packaging>

          <name>angular7java</name>
          <url>http://maven.apache.org</url>

          <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>   
            **<angular.project.location>tdf</angular.project.location>**
            <!--your project name -->
            <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
          </properties>

          <dependencies>
            <dependency>
              <groupId>junit</groupId>
              <artifactId>junit</artifactId>
              <version>3.8.1</version>
              <scope>test</scope>
            </dependency>
          </dependencies>

          <build>
           <plugins>    
                <plugin>
                        <groupId>com.github.eirslett</groupId>
                        <artifactId>frontend-maven-plugin</artifactId>
                        <version>1.6</version>
                        <configuration>
                        <workingDirectory>${angular.project.location}</workingDirectory>
                        <installDirectory>${angular.project.nodeinstallation}</installDirectory>
                         </configuration>
                        <executions>
                            <execution>
                                <id>install node and npm</id>
                                <goals>
                                    <goal>install-node-and-npm</goal>
                                </goals>
                                <configuration>
                                   <nodeVersion>v9.9.0</nodeVersion>
                                </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>

                             <execution>
                            <id>npm build</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>run build</arguments>
                            </configuration>
                        </execution>

                        </executions>
                    </plugin>

                <!-- Plugin to copy the content of /angular/dist/ directory to output 
                    directory (ie/ /target/transactionManager-1.0/) -->
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>2.4.2</version>
                    <executions>
                        <execution>
                            <id>default-copy-resources</id>
                            <phase>process-resources</phase>
                            <goals>
                                <goal>copy-resources</goal>
                            </goals>
                            <configuration>
                                <overwrite>true</overwrite>
                                <!-- This folder is the folder where your angular files 
                                will be copied to. It must match the resulting war-file name.
                                So if you have customized the name of war-file for ex. as "app.war"
                                then below value should be ${project.build.directory}/app/ 
                                Value given below is as per default war-file name -->
                                <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
                                <resources>
                                    <resource>
                                        <directory>${project.basedir}/${angular.project.location}/dist</directory>
                                    </resource>
                                </resources>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
        <!--         <attachClasses>true</attachClasses>
                <webXml>target/web.xml</webXml>
                <webResources>
                    <resource>
                        <directory>src/main/webapp</directory>
                        <filtering>true</filtering>
                    </resource>
                </webResources> -->
            </configuration>
        </plugin>

                    <plugin>
                        <artifactId>maven-compiler-plugin</artifactId>
                        <version>3.1</version>
                        <configuration>
                            <fork>true</fork>
                            <executable>C:\Program Files\Java\jdk1.8.0_181\bin\javac.exe</executable>

<!--make sure above directory is correct (make it same as your local javac.exe-->
                        </configuration>
                    </plugin>
            </plugins>
        </build>



        </project>

5. right click your maven project maven - maven install or terminal : mvn clean install

and wait until it stalled. once it installed, you can see node-installation folder and war file are created

How to deploy a Java and Angular webapp in one JAR/WAR, Steps to configure maven project to auto compile and build angular app. from your-angular-directory/dist/ in root of .war file (before finally making .war file). maven to setup nodejs and run commands npm install and npm run build for you It will execute command "npm install" inside "/angular" directory  Now, you should be able to open your project in any IDE. By default the pom.xml will include locked down versions for Maven plugins.You could safely get rid of those since we won't personalize the

java: How to setup angular 4 inside a maven based java war project, For new projects I suggest that you separate your Angular application from We import the maven-war-plugin to generate the final war. <executions> <​execution> <id>install npm</id> <configuration> <workingDirectory>. Note: Change “Packaging” to “War” if you intend to deploy your project to a Servlet Container (like Tomcat etc). 2. Click next, and select any number of Spring Boot Starters you may need.

How to setup a project with Angular 7 and Spring Boot, that provides , I'm becoming a bit crazy because I can't find a guide to setup an angular 4 app inside a java war project that will be built with maven. This is because I want to  You don’t have to copy things every time (it will be done automatically). But you have to set up your project first time. So do these steps. 1. Create maven project. 2. In the root of that maven project create folder named as angular. 3. Put your angular 2 code (package.json, dist whatever) inside that “angular” folder. 4.

Setup a single Angular 6 and Spring Boot project with Maven, So, have you ever tried to embed a custom Angular component in you to generate the structure of an Maven project with Java and Spring Boot version 2.0.​6”. In application that we would like later to build as WAR file and deploy it, we Angular CLI is a command line interface for creating Angular apps  1.) I started with a spring boot/maven project. 2.) I added Angular 5 files into the project. 3.) I tested that I could build the project via the command line using node, bower, and gulp. Currently in my pom.xml I am importing the following:

Comments
  • Suggestion: Look into JHipster
  • @Giamma : stackoverflow.com/questions/38532210/…
  • It's for angular 2 not angular 4
  • i have used frontend-maven-plugin[github.com/eirslett/frontend-maven-plugin] . with the help of this plugin i am able to build angular project and place it in war using single command mvn clean package
  • @TimeTraveler any example? thanks
  • What does dist folder contain here?
  • @abhijeet-mohanty, it is a target directory for build artifact for angular similar to target dir of maven where final war or jar is created. Angular cli transpile all typescript code to JavaScript and put it in dist dir.
  • Do we need to install Angular first?
  • @santosh-shelke This is about how to combine angular cli project inside Java maven project. You should first have Angular cli project itself building and running fine independently. Above process is not necessary if you can deploy angular app and Java web services app seperately. After doing the above setup, running mvn clean package will build a war having Java + angular files in it. You don't need to install node.js and angular packages separately for this because maven front end plugin install node and packages automatically.
  • Don't put anything in node_installation folder. It is place holder where nodejs will be downloaded and installed by front-end plugin automatically. You can choose different name but need to mention same name in pom.xml so that plugin can know about it.
  • I think you can keep angular project anywhere you want but provide its correct relative path in pom.xml. 1. war plugin picks whatever is inside webapp folder and put it in root of war file. if you put content of dist in webapp then it will go to root of war, in my answer instead of putting dist folder in webapp we are using maven-resources-plugin to copy content of dist folder into root of war. both way you will get same result. the dist folder contains all dependencies including asset folder. 2. As i said dist folder contains all dependencies no need to integrate node_modules. 3.not necessary
  • Web server will not interpret typescript, angular-cli already transpile it to javascript, css. after that web server only acts a http server which serve javascript and css as static content.