如何使用 webpack 将 angular2 与现有的 Spring Boot 服务器结合使用答案

【问题标题】：How to use webpack combine angular2 with existing spring boot server如何使用 webpack 将 angular2 与现有的 Spring Boot 服务器结合使用
【发布时间】：2016-09-17 10:24:08
【问题描述】：

我希望现有的 spring boot 网关作为后端服务器，而不是 angular 2 。

那是我希望 angular2 结合到弹簧网关。

假设：

angular 2 webpack-dev-server 在端口 8090 上，并且有一个页面索引.html

8080端口上的spring boot gateway：以及所有的api。

我要打开

localhost:8080

查看angular2 index.html，

如何实现？

【问题讨论】：

标签： spring-mvc spring-boot angular spring-cloud

【解决方案1】：

我找到了一个实现的例子，

前面是：https://github.com/springboot-angular2-tutorial/angular2-app

spring-server 是：https://github.com/springboot-angular2-tutorial/boot-app，

参考这个例子，我已经成功搭建了一个简化版演示。

【讨论】：

【解决方案2】：

您需要为您的后端设置代理。我知道基于 Express 的 webpack-dev-server。所以，我可以告诉你如何使用 Express 运行它：

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/entry-point 引用后端 API。

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

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

【讨论】：

感谢您的提示，我找到了另一种实现方法。因为我用的是弹簧。