Angular2：如何从“ng服务”出发托管到Node.Js托管 [英] Angular2: How to go from an "ng serve" hosting to a Node.Js hosting
问题描述
我已经制作了我的第一个Angular2应用程序，同时使用 ng服务进行托管。现在我要添加一些后端（因为我需要一些小的服务器逻辑）。
I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).
我发现这个基本上解释了我如何在nodeJs上托管一个角度2应用程序。但 ng服务做了很多事情，检查更改，捆绑不同的JS / CSS文件，将角度注入我的模板，获取我的依赖项。
I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.
我不能只是生成有角度的网站然后，因为我要更新角度部分以从web api获取数据并使用它。
I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.
那么我应该怎样做才能从 ng服务切换到 nodeJS ？
So what should I do to switch from ng serve to an nodeJS?
编辑：
查看答案，我一定不够清楚。
我的角度JS不是仅在客户端上的应用程序，我已经完成了它的一部分（导航，某种形式，......）但是现在我需要托管带有web服务和websocket的服务器来继续工作。这不是将其部署到高效的服务器上。它即将迁移到允许我在服务器和客户端工作的环境。
EDIT: Viewing the answer, I must not have been clear enough. My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.
推荐答案
我想我终于理解了你的问题：
I think I finally understood your question:
- 您不想使用与angular-cli捆绑的devserver（
ng serve），而是使用您自己的Node.js驱动的服务器。 - 此外，您不希望以静态方式构建您的应用程序（
ng build）。您想要提供实时版本（必须由服务器自动生成）。
- Instead of using the devserver bundled with angular-cli (
ng serve), you want to use your own Node.js-powered server. - Also, you DON'T WANT TO STATICALLY BUILD your app (
ng build). You want to serve the live build (which has to be generated automatically by the server).
这里是你怎么做：
1）观察，转换，捆绑......
Webpack非常适合。
Webpack is perfect for that.
使用Angular应用程序的正确设置创建 webpack配置文件。这是angular2-webpack-starter的一个例子： webpack .dev.js 。
Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.
这个例子有点冗长。请记住配置文件是告诉webpack如何处理 .ts 文件，它应该生成什么包等等。
The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.
2）使用Node.js服务器提供webpack生成的捆绑包
我看到两个选项，取决于您想要多少控制：
I see two options, depending on how much control you want:
2a。使用 webpack-dev-server （不是很多控制）
2a. Use webpack-dev-server (not a lot of control)
webpack-dev-server --config config/webpack.dev.js --watch src/
您可以看到webpack-dev-server使用前面提到的配置文件。
You can see that the webpack-dev-server uses the config file previously mentioned.
再次，您可以看到在angular2中运行的完整命令的示例-webpack-starter的 package.json 文件。
Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.
2b。创建自己的服务器（大量控制）
您可以使用 webpack-dev创建Node.js / Express服务器-middleware ，您将在其中提供在步骤＃1中创建的配置文件。
You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.
中间件是可以让您提供服务的神奇链接通过Express服务器从webpack发出的文件。
The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.
使用 webpack-dev-middleware的Node.js / Express服务器示例： srcServer.js 。
这会回答你的问题吗？
这篇关于Angular2：如何从“ng服务”出发托管到Node.Js托管的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
