javascript - Angular2 : How to go from an "ng serve" hosting to a Node. Js托管

Question

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

我找到了 this谁基本上向我解释了如何在 nodeJs 上托管 angular 2 应用程序。但是 ng serve 做了很多事情，检查更改，捆绑不同的 JS/CSS 文件，将 angular 注入(inject)我的模板，获取我的依赖项。

我不能只“生成” Angular 网站然后，因为我必须更新 Angular 部分以从网络 API 获取数据并使用它。

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

编辑:看了回答，应该是我说的不够清楚。我的 Angular JS 不是一个仅在客户端上运行的应用程序，我已经完成了其中的一部分(导航，某种形式，......)但现在我需要托管一个带有 Web 服务和 websocket 的服务器才能继续工作。这与将其部署到生产服务器无关。它即将转移到一个允许我在服务器端和客户端工作的环境。

Answer 1

我想我终于明白了你的问题:

• 您不想使用与 angular-cli (ng serve) 捆绑在一起的开发服务器，而是想使用您自己的 Node.js 驱动的服务器。
• 此外，您不想静态构建您的应用程序 (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 的 Node.js/Express 服务器示例:srcServer.js .

这是否回答了您的问题？