Exemple d'intégration de Springboot avec Angular2

arrière-plan

Le cadre a commencé avec Springboot en tant que Tomcat et le cadre utilisé avec Angular2 comme page frontale. Enfin, le code d'Angular2 doit être exécuté dans le Tomcat intégré de Springboot.

Structure du projet

 SRC / Main / -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Le répertoire angulaire est un nouveau projet créé à l'aide de CLI angulaire. Le code de démarrage de Springboot en Java. Il n'y a que le fichier de configuration application.yml dans le répertoire des ressources

Idées d'intégration

Étant donné que les projets Springboot doivent ajouter des fichiers HTML statiques, etc., vous devez les mettre dans le répertoire statique sous ressources, puis vous pouvez accéder directement au fichier index.html dans le répertoire statique via localhost: 8080 / index.html. Nous devons donc mettre le code compilé d'Angular dans ce répertoire statique.

Ainsi, les étapes de l'intégration:

1. Compiler les projets angulaires, utiliser la commande de libération NPM Run et le code compilé se trouve dans le répertoire angulaire / distant
2. Copiez tous les fichiers du répertoire angulaire / dist au répertoire des ressources / distr (le répertoire de package JAR compilé par Springboot), ou utilisez le répertoire angulaire / distant comme ressource de ressource

Nous pouvons le faire via certains plugins de Maven, où le plugin Exec-Maven-Plugin (utilisé pour exécuter des commandes).

construire dans pom.xml

Dans le fichier pom.xml du projet, nous devons ajouter la configuration de build:

1. Répertoire d'utilisation / src / main / angulaire / distant comme répertoire de ressources
2. Lors de la construction, exécutez la commande de libération de l'exécution du NPM

 <Duild> <Sessiers> <Resource> <Arnutory> SRC / Main / Resources </ Directory> </ Resource> <Resource> <Ar répertoire> $ {project.basedir} / src / Main / Angular / Dist </ Directory> <BargetPath> Static </ TargetPath> </ Resources> </sériales> </ plugins> <! répertoire -> <glugin> <proupId> org.codehaus.mojo </rom grouped> <Artifactid> Exec-Maven-Plugin </ ArtifactId> <DERVIRED> 1.6.0 </ Version> <Execution> <Exécution> <pasiy> Generate-Sources </ Phase> </ Exécution> Exécution> <FIFICITION> <IMICABLE> NPM </ EXECTIVATION> <LATRALLÉDIRECTORY> SRC / MAIN / ANGULLAL </ WorkingDirectory> <Rarguments> <Risting> Exécuter </ Argument> <Argument> Release </ Argument> </ Arguments> </ Configuration> </Glugin> </Glugins> </ build>

Ensuite, après avoir exécuté le package MVN Clean, vous verrez tous les fichiers du répertoire statique et du répertoire angulaire / distant du répertoire cible / classes. Le package JAR généré final contiendra également ces contenus.

Test de projet de démarrage local

Si vous continuez à exécuter en utilisant la fonction application.main de SptringBoot, car il n'y a pas de code angulaire / dist dans les ressources, vous ne verrez pas correctement la page. La solution consiste à utiliser un autre plugin Maven: Spring-Boot-Maven-Plugin, qui est spécifiquement utilisé pour la commande maven de Springboot.

Ajoutez le code suivant pour créer> Plugins dans pom.xml:

 <flugin> <proupId> org.springframework.boot </prouprid> <artifactive> printemps-boot-maven-Plugin </ artifactid> <version> 1.5.9.9.release </-version> <axecution> <execution> <but> </puil> repackage </ but> </ buts> </isecution> </Executions> </gigin>

Exécutez ensuite la commande Run de Maven: mvn clean spring-boot:run pour démarrer le projet et le fichier compilé angulaire sera chargé.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.