问Angular2:如何从"ng服务“宿主到Node.Js宿主

EN

我终于明白你的问题了：

• 您不需要使用绑定有角-cli (ng serve)的devserver，而是使用自己的Node.js支持的服务器。
• 另外，您也不希望静态地构建应用程序(ng build)。您希望服务于实时构建(必须由服务器自动生成)。

以下是你如何做到的：

1)手表，传送带，捆绑.

Webpack就是这方面的最佳人选。

创建一个webpack配置文件与一个角应用程序的正确设置。这里有一个来自angular2-webpack的例子：webpack.dev.js。

这个例子有点冗长。请记住，配置文件是您告诉webpack如何处理.ts文件的地方，它应该生成什么包等等。

2)使用Node.js服务器服务webpack生成的包

我看到两个选项，取决于您想要多少控制：

2a.使用webpack-dev-server (不是很多控制)

webpack-dev-server --config config/webpack.dev.js --watch src/

您可以看到webpack-dev服务器使用前面提到的配置文件。

同样，您可以看到要在angular2-webpack-初学者的package.json文件中运行的完整命令的示例。

2b.创建您自己的服务器(很多控件)

您可以使用webpack-dev-middleware创建一个Node.js/Express服务器，然后将步骤1中创建的配置文件提供给该服务器。

中间件是一个神奇的链接，它允许您通过Express服务器为webpack发出的文件提供服务。

使用webpack-dev-middleware：srcServer.js的Node.js/Express服务器示例。

这能回答你的问题吗？

我知道这是一个老问题，但我也有同样的顾虑，我发现ngserve选项很有用。在开发中，您可以在另一个端口上运行节点，然后调用/api被重定向到node.js。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

package.json gets："start": "ng serve --proxy-config proxy.conf.json",

然后创建一个像这样的proxy.conf.json文件{ "/api": { "target": "http://localhost:3000", "secure": false, "pathRewrite": { "^/api": "" } } }

运行ng build --prod构建应用程序。

构建应用程序之后，您将在dist目录中找到最终的dist代码。

现在，在server.js文件中使用Node.js中的代码。

(function() {
    const express = require("express");
    const app = express();

    app.use(express.static(__dirname + "/dist"));

    app.listen(80);
    console.log("port" + 80);
})();