comment intégrer Angular 2 + Java Application Web Maven

Question

J'ai créé une application Angular 2 frontale. Et j'en ai créé une Java Reste du backend WS qui est connectée à la base de données.).

Ma structure de dossier pour Angular 2 App est ci-dessous-

Angular2App confg dist e2e node_modules public src app favicon.ico index.html main.ts system-config.ts tsconfig.json typings.d.ts tmp typings .editorconfig .gitignore angular-cli.json angular-cli-build.js package.json README.md tslint.json typings.json

Et mon Java Maven Web Application Structure est en dessous de -

JerseyWebApp src main Java Custom Package Java classes resources webapp WEB-INF web.xml index.html pom.xml

Je veux savoir comment intégrer ces deux applications dans une application qui ne produira qu'un seul fichier de guerre.

J_Dev · Answer

Voici ce que j'ai fait:-

Installez Nodejs v6.9 +
Exécuter npm install @ angular/cli –g pour Angular CLI
Installez Apache Maven ou utilisez n’importe quel IDE convivial de Maven
Utilisez votre configuration Maven requise, j'ai utilisé une simple application Web (WAR).

Structure du répertoire (sauf pour ngapp dossier reste est la structure Maven standard.)

ngfirst ├── pom.xml ├── src │ └── main │ ├── Java │ ├── resources │ ├── webapp │ └── ngapp

Partie angulaire

Ouvrez le dossier ngapp dans le terminal et tapez ng init pour initialiser la configuration des nœuds et npm, le résultat sera un exemple simple d'application Angular2 avec la structure de répertoires suivante dans le dossier ngapp: -

 ├── 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

Cette structure est Angular équivalente à la structure de projet Maven et le répertoire src est Angular le source de l'application, tout comme la commande maven build en génère sortie dans le dossier cible, la commande ng build génère sa sortie dans le dossier dist.

Afin de conditionner l'application Angular générée dans le fichier WAR généré par Maven, modifiez la configuration de construction afin de changer le dossier de sortie de dist à webapp, ouvrez angular-cli.json le fichier et modifie son outDir comme suit: -

"outDir": "../webapp/ng"

À ce stade, la commande ng build générera un répertoire Angular construit à l'intérieur du répertoire ng du dossier ngfirst/src/main/webapp .

partie maven

Ouvrez pom.xml et configurez les trois plugins Maven suivants: -

compiler-plugin: Aucun Java élément à compiler dans le dossier/src/main/ngapp, excluez-le.
war-plugin:/src/main/ngapp est le dossier de projet Angular et ne doit pas être empaqueté dans WAR, excluez-le.
exec-plugin: exécutez les commandes NPM Install et Angular-CLI Build pour générer Angular une application dans le dossier webapp pour le conditionnement final. Remarque - Argument base-href, il est nécessaire de charger Angular des ressources à partir du chemin de contexte de Webapp.

Voici à quoi cela devrait ressembler: -

<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 (et Angular App aussi)

Ouvrez Terminal dans le dossier racine du projet ngfirst et exécutez la commande paquet mvn, cela générera un fichier WAR (ngfirst.war) dans le dossier cible.

Déployez ngfirst.war dans un conteneur, ouvrez http: // localhost: 8080/ngfirst/ng/index.html dans le navigateur. (ajustez votre nom d'hôte et votre port si nécessaire)

Si tout s'est bien passé, vous devriez voir l'application fonctionne! dans le navigateur, c'est-à-dire Angular Application at work !!

pré-traitement JSP

Nous pouvons exploiter les capacités de configuration dynamique et de rendu de page de la technologie JSP avec l’application Angular, Angular SPA servi par le conteneur Java sous forme de page HTML standard, index.html Dans ce cas, si nous configurons le moteur JSP pour le traitement préalable des fichiers html également, toute la magie JSP peut être incluse dans la page Angular SPA, il suffit d'inclure les éléments suivants à l'intérieur web.xml

<servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping>

Enregistrez, reconstruisez le projet Maven, déployez WAR et le tour est joué !!

boly38 · Answer

De mon côté, j'ai un module maven pour angular appelées prj-angular, et une autre pour l'application de guerre appelée prj-war.

le premier prj angular est construit:

il utilise maven-exec-plugin pour appeler npm install et ng build _ (merci à @J_Dev!)
change le répertoire par défaut de la ressource en dist/
sauter la génération MANIFEST
résultat du module maven: un pot avec angular dist / contenu = généré seulement!

alors, la seconde prj_war est build:

a prj angular comme dépendance
utilisez la phase de décompression pour décompresser le fichier jar précédent dans la destination de l'application Web
ce module vous construira la guerre des applications avec des nouveaux angular dist.

Suivez sous la configuration de plugin correspondante que j'ai utilisée:

prj angular (extrait de pom.xml) =

<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 (extrait de pom.xml)

 <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>

Scrambo · Answer

Curieusement, je ne l’ai fait que la semaine dernière!

Utilisation de Netbeans 8.1 et d’un servlet Tomcat version 8.0.27

Angular et Java.

Le projet Java s'appelle 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

Caio Leonhardt · Answer

Je recommande de laisser les deux applications séparées, de cette façon vous avez la modularité. De cette façon, vous pouvez modifier l’application Angular sans affecter votre service, et inversement. En second lieu, vos Apache/nginx sont plus rapides pour livrer vos fichiers js et html de Angular à la place de Tomcat (par exemple). Mais si vous voulez toujours placer l'application Angular à l'intérieur de la guerre, toutes les ressources Web se trouvent généralement dans src/main/webapp.

xcesco · Answer

Je veux partager comment définir mes projets angulaires/Java. Quelques choses importantes:

Il n'y a qu'un seul projet Maven et cela me permet de construire l'ensemble du projet. Cela ne signifie pas que je peux toujours construire séparément le serveur frontal et le serveur principal.
Mon projet est basé sur le framework Spring Boot. Cependant, vous pouvez facilement adapter ma solution à votre situation. Je génère le code output de Angular angulaire est placé dans le dossier `META-INF '. Vous pouvez évidemment le modifier si vous n'utilisez pas Spring Boot.
Dans mon projet, je souhaite publier le projet angular dans le dossier public.
Lorsque je développe, j’exécute séparément le projet Angular et le projet backend: Angular avec ng serve Et le projet backend (= Java) dans le IDE (Eclipse).

OK commençons. La structure complète du projet est représentée dans l'image suivante.

Comme vous pouvez le constater, j'ai mis le projet Angular dans le dossier 'src\main gapp'. Pour le projet Java (le backend)), j'ai utilisé Eclipse. IDE, pour le projet Angular, j'ai utilisé Webstorm. Vous pouvez choisir votre préféré IDE pour gérer le projet. L'important: vous aurez besoin de deux IDE pour gérer l’ensemble du projet.

Pour construire le projet Angular avec Maven, j'ai utilisé la définition de profil Maven suivante.

<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>

Comme vous pouvez le constater, j’ai utilisé le plug-in com.github.eirslett:frontend-maven-plugin Pour installer le noeud et exécuter npm pour construire le projet Angular. De cette façon, lorsque j’exécute le profil maven build-client Le plugin est utilisé pour:

Vérifiez et installez, si nécessaire, la version du nœud v10.13.0 Dans le Angular src/main/ngapp/
Exécutez la commande npm run build. Dans le Angular angulaire est défini l'alias de construction dans le package.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" }

Le client Angular doit être placé dans le dossier public de l'application Web. Pour ce faire, le projet Angular est configuré pour avoir le baseHref=/public. De plus, le projet généré doit être placé dans src/main/resources/META-INF/resources/public. Dans angular.json, Vous trouverez:

"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "baseHref":"/public/", "outputPath": "../resources/META-INF/resources/public", ...

Dans un projet no-Spring Boot, vous devez probablement placer le projet angular projet directement dans le dossier src/main/webapp/public. Pour ce faire, modifiez simplement le fichier angular.json De la manière suivante: vous avez besoin.

Vous pouvez trouver tout le code du projet dans mon projet github . Le projet de plugin est ici .