web-dev-qa-db-ja.com

Angular 4アプリとSpring Bootスタックを統合するには？

Angular 4クライアントアプリとJava Springアプリケーションがhttp://localhost:8080/で動作し、Restエンドポイントを提供します。私の目標はhttp://localhost:8080/adminisitrationのようなURLからAngularアプリを呼び出すことができます。どうすればできますか？

前もって感謝します、

javaspringangularrestspring-mvc
10
Mario90

Ngアプリをビルドして、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.

これは、spring-bootの下でangle-appを実行するのに役立ちます。

http：// localhost：8080/adminisitration を押すと、正常に動作するはずです

4
Akshay Srivastava

このチュートリアルを参考にしてください link

また、このチュートリアルでangular cliを使用し、リソースフォルダー（作成したもの、つまりフロントエンド）をポイントし、maven pom.xmlでリソースとして設定することもできます。 。

3
Rahul Singh

最初に2つの方法があります。angularアプリを静的リソースとしてスプリングブートアプリケーションから提供するため、jarにパックする必要があります。メンテナンスの観点からは見栄えがよくありません。

2番目は、nginxにangular静的リソースがあり、スプリングブートアプリにangular nginxに設定されたリバースプロキシを通して到達可能です

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

angularがGET http://localhost/api/somerestを要求する場合、GET http://localhost:8080/api/somerestに転送します

3
Sławomir Czaja

私はあなたの質問を理解しているので、proxy.config.jsonという名前の新しいファイルを作成し、そのファイルにコードを貼り付け、.angular-cli.jsonの隣にファイルを配置します

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

バックエンドサーバーへのurlをヒットするには、http://localhost:8080/administrationを使用しないでください。代わりに、プロキシファイルで/administrationを使用するので、http://localhost:8080/を使用してください。 app.component.tsファイル内のngOnInit()内のコードの下に配置

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

バックエンドサーバーの起動：（ポート8080のTomcat）および

フロントエンドサーバーを起動します：ng serve --proxy-config proxy.config.jsonブラウザーを開き、url http://localhost:4200と入力すると、サーバーとクライアントにログが表示されます（存在する場合）。

注：上記のポートは、スプリングブートで提供されるデフォルトであり、angular 4

0
mo sean