webpack combine angle2と既存のスプリングブートサーバーの使用方法

Question

2の代わりに、既存のスプリングブートゲートウェイをバックエンドサーバーとして使用します。

これは、私がang2がスプリングゲートウェイに結合したかったことです。

仮定します

角度2ポート8090上のWebPACK-devのサーバ、およびポート8080上の ページのindex.html

春ブーツゲートウェイがあります：そして、すべてのAPIは、 。

私が実装する方法

、angular2のindex.htmlをを見るために

localhost:8080 

を開くようにしたいですか？

Answer 1

は、私は、実装の例を発見した

フロントがあるhttps://github.com/springboot-angular2-tutorial/boot-app、この例に

リファレンス、私は正常にビルドしています デモを簡略化します。

Answer 2

バックエンドにプロキシを設定する必要があります。私はExpressをベースとしたwebpack-dev-serverを知っています。

var express = require('express'); 
var request = require('request'); 
var path = require('path'); 

var app = express(); 
app.use('/api', function(req, res) { 
    var url = 'http://localhost:8080/api' + req.url; 
    req.pipe(request(url)).pipe(res); 
}); 

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

/* serves all the static files */ 
app.get(/^(.+)$/, function(req, res){ 
    res.sendFile(__dirname + req.params[0]); 
}); 

app.listen(8090); 

そして、あなたは/ API /エントリー・ポイントでバックエンドのAPIを参照してください：だから、私はあなたにExpressでそれを実行する方法の手掛かりを与えることができます。 https://github.com/springboot-angular2-tutorial/angular2-app

とバネのサーバーは、次のとおりです：

@Injectable() 
export class HttpProductDiscountService { 
    constructor(private _http: Http) {} 

    getProductDiscounts() { 
     return this._http.get('api/1.0/product-discount') 
      .map(res => res.json()) 
    } 
}