comment intégrer l'application Web Angular 2 + Java Maven
J'ai créé une application frontale Angular 2.et j'ai créé une application principale Java Rest WS qui est connectée à DB.
Ma structure de dossier pour l'application Angular 2 est ci-dessous-
- Angular2App
- confg
- dist
- e2e
- node_modules
- public
- src
- application
- favicon.ico
- index.code html
- principal.ts
- configuration système.ts
- tsconfig.json
- dactylographie.d.ts
- tmp
- dactylographie
- .editorconfig
- .gitignore
- angulaires-cli.json
- angulaires-cli-construire.js
- paquet.json
- README.md
- tslint.json
- dactylographie.json
Et Ma structure d'application Web Java Maven est ci-dessous -
- JerseyWebApp
- src
- principal
- java
- Paquet personnalisé
- classes java
- ressources
- application web
- WEB-INF
- web.xml
- index.code html
- pom.xml
- src
Je veux savoir comment intégrer ces deux applications en une seule application qui ne produira qu'un seul fichier war.
4 answers
Voici ce que j'ai fait:-
- Installer Nodejs v6. 9 +
- Exécuter npm install @angulaire/cli –g de Angulaire de la CLI
- Installez Apache Maven ou utilisez n'importe quelE compatible Maven
- Utilisez votre configuration Maven requise, j'ai utilisé simple webapp (WAR).
Le répertoire Stucture (Sauf pour ngapp le dossier rest est une structure Maven standard.)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
Partie Angulaire
Ouvrir le dossier ngapp dans le terminal et tapezng init commande pour initialiser la configuration du nœud et npm, le résultat sera un simple exemple d'application Angular2 avec la structure de répertoire 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 l'équivalent angulaire de la structure du projet Maven et le répertoire src est la source de l'application angulaire, tout comme la commande maven build génère sa sortie dans le dossier target , la commande ng build génère sa sortie dans dist dossier.
Pour empaqueter l'application Angulaire générée dans Maven generated WAR, modifiez la configuration de construction pour changer le dossier de sortie de disten webapp, ouvrez angular-cli.json file et modifie son outDir comme ci-dessous: -
"outDir": "../webapp/ng"
À ce stade, la commande ng buildgénérera une application angulaire construite dans le répertoire ngdu dossier ngfirst/src/main/ webapp.
Maven Partie
Ouvrir pom.xml et configurer les trois plugins maven suivants: -
- compilateur-plugin : Pas de trucs Java à compiler dans le dossier /src/main/ngapp , excluez-le.
- war-plugin : /src/main/ngapp est un dossier de projet angulaire et il 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 une application angulaire dans le dossier webapp pour final emballage. Remarque argument base-href argument, il est nécessaire de charger des ressources angulaires à 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>
Construire le projet Maven (et l'application angulaire aussi)
Ouvrez le terminal dans le dossier racine du projet ngfirst et exécutez la commande mvn package , cela générera un fichier WAR (ngfirst.guerre) cible dossier.
Déployer ngfirst.guerre dans un conteneur, ouvert 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 une application angulaire au travail!!
Prétraitement JSP
Nous pouvons tirer parti des capacités de configuration dynamique et de rendu de page de la technologie JSP avec l'application Angular, Angular SPA est servi par le conteneur Java en tant que page HTML régulière, index.html dans dans ce cas, si nous configurons JSP Engine pour pré-traiter également les fichiers html, alors toute la magie JSP peut être incluse dans la page Angular SPA, incluez simplement ce qui suit dans web.xml
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Enregistrer, reconstruire le projet maven, déployer la GUERRE et le tour est joué!!
De mon côté, j'ai un module maven pour les sources angulaires appelé prj-angular, et un autre pour l'application war appelé prj-war.
Premier prj angulaire est construit:
- , il utilise maven-exec-plugin pour appeler
npm installetng build(merci à @J_Dev!) - remplacer le répertoire par défaut de la ressource par
dist/ - ignorer la génération du MANIFESTE jar
- résultat du module maven: un pot avec un contenu angulaire généré dist / seulement!
Puis, en seconde prj_war est de construire:
- a prj angulaire, puisque la dépendance
- utilisez la phase de déballage pour décompresser le fichier jar précédent dans la destination de l'application Web
- ce module vous construit une guerre d'applications avec un nouveau disque angulaire.
Suivez sous la configuration du plugin correspondante que j'ai utilisée:
Prj angulaire (pom.extrait 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 guerre (pom.extrait 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>
Curieusement, je l'ai fait la semaine dernière!
Utilisation de Netbeans 8.1 et d'un servlet Tomcat version 8.0.27
Structure de fichier de projet angulaire et Java.
Le projet Java s'appelle Foo. Le projet angulaire est 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
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 vice versa. Deuxièmement, votre apache / nginx est plus rapide pour livrer vos js et html à partir d'Angular à la place de Tomcat (par exemple). Mais si vous voulez toujours mettre l'application angulaire dans la guerre, le modèle est que toutes les ressources Web sont dans src/main/webapp.