How to set up Angular 4 inside a Maven-based Java project

Question

I get a little crazy because I cannot find the angular 4 application setup guide in the java war project to be built with maven. This is because I want to run it in the wildfly server.

Any help?

thanks

Answer 1

I had a similar requirement to have one source project that has a java web services project, as well as an angular project (angular-cli based project), and the maven assembly should create a war with all the corner files in it. I used maven-frontend-plugin with a few configuration changes for the base path.

The goal was to create a war file with all the Java code as well as the compiled corner code in the root folder of war, all with a single mvn clean package command.

One more thing for this to work in order to avoid a conflict between the URLs of the angular-app router and the URLs of your java application. You need to use HashLocationStrategy. one way to configure it in app.module.ts as shown below

app.module.ts -

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

Folder structure for Angular App - below-

Corner Project

• distance
• e2e
• node_modules
• the public
• CSI
  • Appendix
  • assets
  • Environment
  • favicon.ico
  • index.html
  • main.ts
  • polyfills.ts
  • style.css
  • tsconfig.json
  • typings.d.ts
  • etc. - etc.
• Tmp
• .angular-cli.json
• .gitignore
• karma.conf.js
• package.json
• README.md
• tslint.json
• etc.

Maven Project -

• CSI
  • main
    • Java
    • Resources
    • Webapp
      • WEB-INF
      • web.xml
• angular-project ( post your corner project here )
• node_installation
• pom.xml

Add maven-frontend-plugin configuration to pom.xml

  <properties> <angular.project.location>angular-project</angular.project.location> <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation> </properties> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.0</version> <configuration> <workingDirectory>${angular.project.location}</workingDirectory> <installDirectory>${angular.project.nodeinstallation}</installDirectory> </configuration> <executions> <!-- It will install nodejs and npm --> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v6.10.0</nodeVersion> <npmVersion>3.10.10</npmVersion> </configuration> </execution> <!-- It will execute command "npm install" inside "/e2e-angular2" directory --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- It will execute command "npm build" inside "/e2e-angular2" directory to clean and create "/dist" directory --> <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> 

As above, the internal plugin calls 'npm run build', make sure package.json must have the build command in the script, as shown below:

package.json

 "scripts": { -----//-----, "build": "ng build --prod", -----//------ } 

index.html should always load when someone clicks on an application from a browser, so make it a welcome file. For web services, let's say we have the path / rest-services / *, we will explain this later.

web.xml -

 <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <servlet-mapping> <servlet-name>restservices</servlet-name> <url-pattern>/restservices/*</url-pattern> </servlet-mapping> 

The above configuration is sufficient if your application has no context path and is deployed in the root path on the server. But if your application has any contextual path, for example http: // localhost: 8080 / myapplication /, then make changes to the index.html file too -

angular-project / src / index.html - here document.location will be myapplication / (otherwise the context path of your application / if the application does not have a context path)

The goal of making the context path the base path for angular-app is that whenever you make an ajax http call from angular, it will add the base path to the url. for example, if I try to call 'restservices / people', then it will actually make calls to ' http: // localhost: 8080 / myapplication / restservices / people '

index.html

  <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>E2E</title> <script>document.write('<base href="' + document.location + '" />'); </script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> 

After all of the above changes, after running mvn clean package it will create the required war. Check if the entire contents of the corner folder dist is in the root of war file.

Answer 2

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

Contrary to this post and, accordingly, the following link ( how to integrate Angular 2 + Java Maven Web Application ), which was provided by Part Gia, I think that the Angular project should be placed in the webapp folder of the Tourism-Services module project. Given this, I have additional questions:

1. Usually, all compilation results in the dist folder should be placed in the webapp folder. But in the dist folder, not all Angular project resources (like images, css that should be present in the angular assets folder, am I right?)

2. Given the angular dependencies that node_modules have, should we integrate them in the webapp folder as well? There is one obstacle: firstly, there are Typescript files that must also be compiled for interpretation by the server, but maybe they are compiled and added when they are imported into the corner files of the user application? What is the solution?

3. Should we include other types of resources from the corner project in the webapp folder ?.