L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
BOTTE ANGULAIRE ET À RESSORT COMME UNE SEULE APPLICATION
Angular et Spring Boot en tant qu'application unique
Prérequis : Expérience en Spring Boot, Gradle et Angular.
Concept :
Ce blog vous permettra de comprendre comment créer du code Angular et Java en tant que WAR unique /JAR en utilisant Gradle.
Qu'est-ce que Spring Boot ?
Spring Boot est une application autonome qui réduit plusieurs étapes de développement fastidieuses ainsi que le code et la configuration passe-partout. Il nous aide à créer une application Web en tant que fichier JAR autonome avec aucune configuration XML et un serveur Web intégré. Il regroupe également l'application avec toutes les dépendances nécessaires.
Qu'est-ce qu'Angular ?
Angular est une plate-forme et un framework permettant de créer des applications clientes d'une seule page à l'aide de HTML et de TypeScript. Angular est écrit en TypeScript. Il implémente des fonctionnalités de base et facultatives sous la forme d'un ensemble de bibliothèques TypeScript que vous importez dans vos applications.
Créons une application Spring Boot qui encapsule le projet Angular avec Java (backend) à l'aide de scripts de génération Gradle.
Technologies utilisées :
- Spring Boot 2.4.1 RELEASE
- H2 Database
- Spring Data JPA
- Tomcat Embed 9.0.41
- Gradle 6.7.1
- Java 8
- Bootstrap
Pour ce projet, Spring Tools Suit est utilisé comme IDE. Voici les étapes à suivre pour créer l'application.
- Créer un projet Spring Starter avec la base de données H2, Spring Data JPA et les dépendances Spring Web.
Build Script
- Créez un script Gradle pour exécuter l'intégralité du projet Spring Boot .
plugins {
identifiant 'org.springframework.boot' version '2.4.1'
id 'io.spring.dependency-management' version '1.0.10.RELEASE'
identifiant 'java'
}
appliquer le plugin: 'war'
groupe = 'org.objectif'
version = '0.0.1-INSTANTANÉ'
sourceCompatibilité = '1.8'
référentiels {
mavenCentral()
}
tâche deleteStaticFolder(type : Supprimer) {
def dirName = "src/main/resources/static"
file( dirName ).list().each{
f ->
supprimer "${dirName}/${f}"
}
}
processResources.dependsOn('application-frontend:build')
dépendances {
implémentation 'org.springframework.boot:spring-boot-starter-data-jpa'
implémentation 'org.springframework.boot:spring-boot-starter-web'
runtimeOnly 'com.h2database:h2'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
test {
utiliserJUnitPlatform()
}
- Créez un autre script Gradle dans le projet Angular pour créer le projet Angular
plugins {
identifiant "com.github.node-gradle.node" version "3.0.0-rc6"
}
version '0.0.1'
nœud {
version = '14.15.4'
npmVersion = '6.14.10'
télécharger = vrai
workDir = file("${project.buildDir}/node")
nodeModulesDir = file("${project.projectDir}")
}
création de tâche (type : NpmTask) {
arguments = ['run', 'build']
}
//build.dependsOn(npm_install)
//frontend:build sera exécuté avant le processResources
- Créez un fichier de paramètres Gradle dans le projet Spring Boot qui définit les noms du projet racine et du projet interne.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version 1,
"newProjectRoot": "projets",
"projets": {
"application-frontend": {
"projectType": "application",
"schémas": {},
"racine": "",
"sourceRoot": "src",
"préfixe": "application",
"architecte": {
"construire": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../src/main/resources/static",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": vrai,
"les atouts": [
"src/favicon.ico",
"src/assets"
- Le "outputPath" est défini sur l'emplacement statique qui est présent dans le dossier des ressources de l'application Spring Boot
