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 un IDE compatible avec Maven.
- Utilisez votre configuration Maven requise, j'ai utilisé une simple webapp (WAR).
Structure de l'annuaire (Sauf pour ngapp Le reste du dossier est la structure standard de Maven).
ngfirst
pom.xml
src
main
java
resources
webapp
ngapp
Partie angulaire
Ouvrir ngapp dans le terminal et tapez ng init pour initialiser la configuration de node et de npm, le résultat sera une application d'exemple Angular2 simple 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 en Angular de la structure des projets Maven et src est la source de l'application Angular, tout comme le répertoire construction maven La commande génère sa sortie dans cible dossier, ng construire La commande génère sa sortie dans dist dossier.
Afin d'empaqueter l'application Angular générée dans le WAR généré par Maven, modifiez la configuration de construction pour changer le dossier de sortie de dist a webapp , ouvert angular-cli.json et modifiez son outDir comme suit:-
"outDir": "../webapp/ng"
A ce stade ng construire La commande va générer une application Angular construite dans ng répertoire de ngfirst/src/main/ webapp dossier.
Partie Maven
Ouvrez pom.xml et configurez les trois plugins maven suivants:-
-
compilateur-plugin : Aucun élément Java à compiler dans /src/main/ ngapp l'exclure.
-
war-plugin : /src/main/ ngapp est le dossier du projet Angular et il ne doit pas être empaqueté dans le WAR, excluez-le.
-
exec-plugin : Exécuter les commandes NPM Install et Angular-CLI Build pour générer l'application Angular dans le dossier webapp pour le packaging final. Notez l'argument --base-href, il est nécessaire pour charger les ressources Angular à partir du chemin du contexte de webapp.
Voici à quoi il 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>
Construction du projet Maven (et Angular App aussi)
Ouvrez un terminal dans le dossier racine du projet ngfirst et exécuter paquet mvn ce qui générera un fichier WAR (ngfirst.war) dans le répertoire cible dossier.
Déployer ngfirst.war dans un récipient, 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 l'application Angular au travail !
Prétraitement JSP
Nous pouvons tirer parti de la configuration dynamique et des capacités de rendu de page de la technologie JSP avec l'application Angular. La SPA Angular est servie par le conteneur Java comme une page HTML ordinaire, index.html dans ce cas, si nous configurons le moteur JSP pour qu'il pré-traite également les fichiers html, alors toute la magie JSP peut être incluse dans la page Angular SPA, il suffit d'inclure ce qui suit dans la page web.xml
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Sauvegarder, reconstruire le projet maven, déployer WAR et voilà !
0 votes
Je construis mon application en utilisant spring boot et nous jars pour angular2. Pour un exemple, voir github.com/Kiran-N/springboot-and-angular2
0 votes
J'ai eu une tâche similaire, voici mon approche stackoverflow.com/questions/37512154/