Faire un projet multi module Maven avant et arrière (Angular 2 et Spring)
Comment créer un projet multimodule Maven avec un backend Spring et un frontal Angular2? Utiliser Spring initializr ( https://start.spring.io ) et angular cli séparément semble être simple, mais comment puis-je organiser cela comme un multi-module Projet Maven avec des fichiers pom liés mais séparés? Avec quelles valeurs et dans quel ordre dois-je les créer et les initialiser? Je peux utiliser Intellij IDEA si cela facilite les choses, mais je suis également d'accord avec CMD (je suis sur windows).
Le seul didacticiel que j'ai trouvé à ce sujet est ici: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ mais le gars utilise un auto-écrit " frontend-maven-plugin "dont je ne veux pas. Quelqu'un peut-il expliquer les étapes ou me lier à un didacticiel qui n'utilise pas de ressources tierces mais nettoie simplement Spring et Angular2, s'il vous plaît?
EDIT: lorsque j'ai posté cette question, WebDevelopment était pour la plupart nouveau pour moi. La solution ci-dessous a fonctionné au début, mais pour une meilleure évolutivité, nous avons décidé de faire des projets distincts plus tard: un projet FE contenant plusieurs Angular et de nombreuses bibliothèques FE (consultez NRWL's NX pour cela). Et un projet pour chaque BE-Microservice, chacun déployable séparément dans les CI-Pipelines. Google lui-même adopte l'approche d'un projet pour tous les FE et BE, mais ils ont des exigences spéciales (toutes les libs doivent travailler ensemble dans la dernière version) et ils utilisent pour cela la pile ABC (Angular + Bazel + Closure), qui n'est pas encore entièrement disponible pour le public, mais qui mérite d'être surveillée: - https://github.com/angular/angular/issues/19058
La méthode recommandée pour créer une application Angular 2 est d'utiliser l'outil Angular CLI). De même, lorsque vous travaillez avec Java = Projets EE, vous utilisez généralement Maven comme outil de génération.
Pour tirer le meilleur parti des deux mondes, vous pouvez développer un projet multi-modules comme vous l'avez déjà pensé.
Si vous le souhaitez, clonez simplement cet exemple:
git clone https://github.com/prashantpro/ng-jee.git
Étant donné que le projet frontend/UI sera Angular 2. Le projet backend peut être Spring ou purement Java EE application (N'importe quelle application web).
Nous voulons prendre le Angular 2 output ( répertoire dist ) et le mapper dans le projet d'application Web pour l'interface utilisateur partie.
Voici comment vous pouvez le faire sans plugins tiers fantaisistes. Prenons l'exemple de cette structure de projet multi-module:
cd ng-jee (Ceci est votre projet POM parent)
.
├── pom.xml
├── ngdemo
│ ├── pom.xml --- maven pom for angular module
│ ├── dist --- This will be Angular output
│ ├── e2e
│ ├── karma.conf.js
│ ├── node_modules
│ ├── package.json
│ ├── protractor.conf.js
│ ├── README.md
│ ├── src
│ ├── tsconfig.json
│ └── tslint.json
└── webdemo
├── pom.xml
└── src
Le parent pom.xml doit répertorier les deux modules. Le premier module doit être le module UI (Angular 2) suivi du module Java/Spring.
La section importante est présentée ci-dessous pour ng-jee/pom.xml
<packaging>pom</packaging>
<modules>
<module>ngdemo</module>
<module>webdemo</module>
</modules>
Ensuite, si vous avez créé votre angular en utilisant CLI comme ceci:
ng new ngdemo
Ensuite, vous devez placer un pom.xml dans ce même répertoire ngdemo/pom.xml Avoir les plugins de construction ci-dessous: (Cela va construire le Angular CLI et générer une sortie dans son dossier dist ).
<build>
<plugins>
<plugin>
<groupId>org.Apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<failOnError>false</failOnError>
<filesets>
<fileset>
<directory>.</directory>
<includes>
<include>dist/**/*.*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>angular-cli build</id>
<configuration>
<workingDirectory>.</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--prod</argument>
<argument>--base-href</argument>
<argument>"/ngdemo/"</argument>
</arguments>
</configuration>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
La dernière pièce du puzzle consiste à référencer ce dossier ngdemo/dist afin que nous puissions copier la sortie dans notre fichier WAR.
Alors, voici ce qui doit être fait dans webdemo/pom.xml
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.Apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<webResources>
<resource>
<!-- this is relative to the pom.xml directory -->
<directory>../ngdemo/dist/</directory>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>
Maintenant, si vous construisez le projet à partir du répertoire parent ng-jee
mvn clean install
Ensuite, vous verrez que d'abord il construit le projet Angular puis Web Project, tout en faisant la construction pour ce dernier, il copie également le contenu dist Angular dist sur le Web) racine des projets.
Vous obtenez donc quelque chose comme ci-dessous dans le répertoire cible du projet WAR/Web:
/ng-jee/webdemo/target/webdemo-1.0-SNAPSHOT.war
.
├── favicon.ico
├── index.html
├── inline.d72284a6a83444350a39.bundle.js
├── main.e088c8ce83e51568eb21.bundle.js
├── META-INF
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
├── vendor.fb5e0f38fc8dca20e0ec.bundle.js
└── WEB-INF
└── classes
C'est ça. Je ferai une série sur quelques-uns de ces aspects et plus ici Angular et JEE
J'espère que cela vous aidera!