web-dev-qa-db-fra.com

Comment intégrer une application Angular 4 avec une pile Spring Boot?

je souhaiterais intégrer une application client Angular 4 à une application Java Spring fonctionnant sur http://localhost:8080/ et offrant des points de terminaison Reste . Mon objectif est de pouvoir appeler l'application Angular à partir d'une URL telle que http://localhost:8080/adminisitration. Comment puis je faire ça?

Merci d'avance,

javaspringangularrestspring-mvc
8
Mario90

Vous auriez besoin de créer votre application ng et de la placer dans le dossier spring-boot

1. Create a public folder under resources in your spring-boot project

2. ng build --prod, type this command on you angular project which will create a dist folder under your angular project directory

3. copy files from you dist folder and place it in public folder under resources of your spring-boot project.

Cela vous aidera à exécuter votre application angulaire sous spring-boot.

puis appuyez sur http: // localhost: 8080/adminisitration , cela devrait fonctionner correctement

4
Akshay Srivastava

Il y a deux façons d'abord de servir l'application statique de votre application de démarrage printanier sous forme de ressources statiques. Vous devez donc la ranger dans un bocal. Ce n'est pas facile lorsque vous avez deux répertoires différents pour le frontend et le backend et que la maintenance n'est pas très performante. point de vue. 

Deuxièmement, vous avez des ressources statiques angulaires sur nginx et une application de démarrage à ressort est accessible au proxy inverse angulaire configuré sur nginx, comme 

location /api/ { proxy_pass http://localhost:8080/api/; }

alors quand angular demande GET http://localhost/api/somerest il le transmet à GET http://localhost:8080/api/somerest

3
Sławomir Czaja

Jetez un oeil à ce tutoriel qui pourrait vous aider link

Vous pouvez également utiliser angular cli dans ce tutoriel et le diriger vers un dossier de ressources (celui que vous créez ... c'est-à-dire front-end), puis le configurer comme ressource dans votre maven pom.xml. 

2
Rahul Singh

si j'ai bien compris votre question, créez simplement un nouveau fichier nommé proxy.config.json et collez le code ci-dessous dans ce fichier, placez le fichier à côté de .angular-cli.json

{
  "/": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

pour frapper url sur le serveur principal, n'utilisez pas http://localhost:8080/administration mais utilisez /administration car nous utilisons http://localhost:8080/ dans notre fichier proxy . dans app.component.ts endroit du fichier sous le code dans ngOnInit()

this.http.get('/adminisitration',someRequestOption).subscribe(res =>{
  console.log('happy...!');
})

démarrer le serveur principal: (Tomcat sur le port 8080) et

démarrez le serveur frontal: ng serve --proxy-config proxy.config.json ouvrez le navigateur et tapez url http://localhost:4200 vous verrez les journaux sur le serveur et le client, le cas échéant.

NOTE: Les ports ci-dessus sont les ports par défaut tels que fournis par la gaine à ressort et les 4

0
mo sean