Comment le programme d'installation angulaire 4 à l'intérieur d'un maven, java guerre de projet

J'ai eu la même obligation de disposer d'une source de projet web java-projet de services ainsi que angulaires du projet(un angulaires-cli en fonction du projet) et maven build devrait créer une guerre avec tous angulaire des fichiers. J'ai utilisé maven-frontend-plugin avec quelques modifications de configuration pour le chemin d'accès de base.

L'objectif était de créer un fichier war avec tout le code java en elle, plus tous les la aot compilé angulaire de code dans le dossier racine de la guerre, tout cela avec une seule commande mvn clean package.

Une chose de plus pour l'ensemble de ce travail est d'éviter les conflits entre angulaires-app routeur url et votre application java url, Vous devez utiliser HashLocationStrategy. une façon de le configurer via l'application.le module.ts comme ci-dessous

app.le module.ts -

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

]

Structure de dossier Angulaire App est au-dessous de

angulaire du projet

• dist
• e2e
• node_modules
• public
• src
  • application
  • actifs
  • environnements
  • favicon.ico
  • index.html
  • principal.ts
  • polyfills.ts
  • style.css
  • tsconfig.json
  • typings.d.ts
  • etc-etc
• tmp
• .angulaire de la cli.json
• .gitignore
• karma.conf.js
• paquet.json
• README.md
• tslint.json
• etc - etc

Projet Maven -

• src
  • principal
    • java
    • ressources
    • webapp
      • WEB-INF
      • web.xml
• angulaires-projet (place angulaire de votre projet ici)
• node_installation
• pom.xml

Ajouter maven-frontend-configuration du plugin pour 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>

Comme ci-dessus plugin appeler "npm exécuter construire" en interne, assurez-vous de package.json doit avoir à construire de commande dans le script comme ci-dessous -

paquet.json

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

index.html doit toujours être chargé quand quelqu'un a frappé l'application de navigateur, c'est pourquoi faire un message d'accueil . Pour les services web permet de dire que nous avons path /rest/services* expliquerai cela plus tard.

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>

La configuration ci-dessus est suffisant si votre application n'a pas de chemin de contexte et est déployé sur le chemin de la racine sur le serveur. Mais si votre demande a n'importe quel contexte chemin comme http://localhost:8080/myapplication/ y apporter des modifications index.html fichier -

angular-project/src/index.html - Ici le document.emplacement sera myapplication/(le chemin de contexte de votre application, autrement /si l'application n'a pas de chemin de contexte )

Le but de rendre le chemin de contexte d'un chemin d'accès de base pour angulaires-app, c'est que chaque fois que vous faites ajax appel http angulaires, il ajoute chemin d'accès de base à l'url. par exemple, si j'essaie de l'appeler 'restservices/personnes", alors il sera effectivement faire des appels à"http://localhost:8080/myapplication/restservices/persons'

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>

Après tous les changements ci-dessus une fois que vous exécutez mvn clean package il permettra de créer de guerre. Vérifier si tous les contenus de angulaire 'dist' dossier dans la racine de la guerre de fichier.

OriginalL'auteur TimeTraveler

J'ai essayé ces instructions et d'autres articles.
ceux-ci sont super mais c'est un peu ambigu.
Donc, quelqu'un qui n'a pas l'obtenir à la fois .. vérifie ce.

GitHub

Suivez les instructions ci-dessous..

1. Ajouter votre angulaire du projet en vertu de projet java.
   Mon angulaire nom du projet est tdf
   

2.ouvrir l'application.le module.ts (dans votre angulaire du projet/src/app/app.le module.ts)
Ajouter à l'importation et les fournisseurs de

import { LocationStrategy, HashLocationStrategy } from '../../node_modules/@angular/common';
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
],

3.ouvrez le paquet.json (angularproject/paquet.json)
ajouter "construire": "ng build --prod" comme ci-dessous

{
"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.mise à jour de votre pom.xml
-ajouter forntend plugin maven
-ajouter ng répertoire de construction

      <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.
cliquez-droit sur votre projet maven maven maven installer
ou
terminal : mvn clean install

et attendre jusqu'à ce qu'il a décroché.
une fois installé, vous pouvez voir nœud-dossier d'installation et de la guerre de fichiers sont créés

OriginalL'auteur Energy