wake-up-neo.net

Wie kann man eine Angular 4 App mit einem Spring Boot Stack integrieren?

ich möchte eine Angular 4-Client-App mit einer Java Spring-Anwendung integrieren, die an http://localhost:8080/ arbeitet und einige Rest-Endpunkte anbietet . Mein Ziel ist es, die Angular-App über eine URL wie http://localhost:8080/adminisitration aufrufen zu können. Wie kann ich das machen?

Danke im Voraus,

8
Mario90

Sie müssen Ihre ng-App erstellen und diese im Spring-Boot-Ordner ablegen

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.

Dies hilft Ihnen, Ihre Winkel-App unter Spring-Boot auszuführen.

drücken Sie dann http: // localhost: 8080/adminisitration , es sollte einwandfrei funktionieren

4

Es gibt zwei Möglichkeiten, zuerst die Winkel-App von Ihrer Spring-Boot-Anwendung als statische Ressourcen zu verwenden. Sie müssen sie in jar packen, und das ist nicht einfach, wenn Sie zwei verschiedene Repositorien für Frontend und Backend haben und die Wartung nicht gut ist Perspektive. 

Zweitens haben Sie statische Winkelressourcen auf Nginx und die Spring Boot-App ist für Winkelprung-Reverse-Proxy erreichbar, die für Nginx konfiguriert ist 

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

wenn Winkel also nach GET http://localhost/api/somerest fragt, leitet es ihn an GET http://localhost:8080/api/somerest weiter.

3
Sławomir Czaja

Werfen Sie einen Blick auf dieses Tutorial, das Ihnen vielleicht hilft. link

Sie können in diesem Lernprogramm auch winklig cli verwenden und auf einen Ressourcenordner verweisen (den Ordner, den Sie erstellen ... d. H. Das Frontend). Dann können Sie diesen als Ressource in Ihrer maven pom.xml einrichten. 

2
Rahul Singh

wenn Sie Ihre Frage verstehen, erstellen Sie einfach eine neue Datei mit dem Namen proxy.config.json und fügen Sie den folgenden Code in diese Datei ein. Platzieren Sie die Datei neben .angular-cli.json.

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

verwenden Sie http://localhost:8080/administration nicht, um URLs an den Backend-Server zu senden. Verwenden Sie stattdessen /administration, da wir http://localhost:8080/ in unserer Proxy-Datei verwenden in app.component.ts Datei unter dem Code in ngOnInit().

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

backend-Server starten: (Tomcat an Port 8080) und

starten Sie den Frontend-Server: ng serve --proxy-config proxy.config.json öffnen Sie den Browser und geben Sie url http://localhost:4200 ein. Protokolle auf dem Server und dem Client werden angezeigt.

HINWEIS: Die obigen Anschlüsse sind standardmäßig durch Federpaket und Winkel 4 vorgegeben

0
mo sean