如何

Question

我使用ng serve进行托管，制作了我的第一个Angular2应用程序。现在我要添加一些后端（因为我需要一些小的服务器逻辑）。

我发现this基本上解释了我如何在nodeJs上托管一个有角度的2应用程序。但ng serve做了很多事情，检查更改，捆绑不同的JS / CSS文件，将角度注入我的模板，获取我的依赖。

我不能只是“生成”角网站然后，因为我要更新角度部分以从web api获取数据并使用它。

那么我应该怎么做才能从ng serve切换到nodeJS？

修改：看到答案，我一定不够清楚。我的角度JS不是仅在客户端上的应用程序，我已经完成了它的一部分（导航，某种形式，......）但是现在我需要托管带有web服务和websocket的服务器来继续工作。这不是将其部署到高效的服务器上。它即将迁移到允许我在服务器和客户端工作的环境。

Answer 1

我想我终于理解了你的问题：

您希望使用您自己的Node.js驱动的服务器，而不是使用与angular-cli（ng serve）捆绑在一起的devserver。
此外，您不希望以静态方式构建您的应用程序（ng build）。您想要提供实时版本（必须由服务器自动生成）。

以下是您可以这样做的方法：

1）观察，转换，捆绑......

Webpack非常适合。

使用Angular应用程序的正确设置创建 webpack配置文件。以下是angular2-webpack-starter的示例：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-server使用前面提到的配置文件。

同样，您可以在angular2-webpack-starter的package.json文件中看到完整命令的示例。

<强> 2B。创建自己的服务器（大量控制）

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

中间件是神奇的链接，可让您通过Express服务器提供从webpack发出的文件。

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

这会回答你的问题吗？

Answer 2

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

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

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

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

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

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

Answer 3

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

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

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

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

Answer 4

Angular app是一款HTML 5应用。因此，您只需将其作为NoeJs中的静态文件提供。

如何

构建您的应用

ng build --prod

此命令将创建名为dist的文件夹。文件夹内容是您的HTML应用。

为您的应用提供服务

只需使用指向index.html文件的NodeJs应用程序即可。

Answer 5

ng serve仅用于开发。它不是作为生产Web服务器。

ng build --prod --aot --no-sourcemap会将您的应用程序捆绑生产并将其放在dist/目录中。

如果要使用Node.js，可以将Express与静态文件中间件一起使用。您可能还需要一个RewriteRule中间件来支持服务器端HTML5 Pushstate。

实际上，您不需要NodeJS来为您构建的站点提供服务，因为它只是平面文件。具有重写规则的Nginx，Apache或IIS支持HTML5 Pushstate就足够了。

Answer 6

我不确定这是否仍然相关，但这可能有助于其他人快速启动：

运行您的NodeJS服务器部件，例如像这样

nodemon server.js

打开第二个终端（在VSCode Ctrl + Shift`中）并启动客户端部分构建＆amp;观看

ng build --watch

他们将继续并行工作，每个人都做自己的工作。这与ng serve不完全相同，例如这不会立即反映您在页面内的更改，您仍然必须按F5（在Angular之前您最常做的事情）。但这比成为网络包大师更快，更自由，更容易。您仍然可以在终端之间切换以检查是否有任何输出/错误。

Angular2：如何从“ng服务”托管到Node.Js托管

6 个答案:

如何

构建您的应用

为您的应用提供服务