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

标签 javascript node.js angular

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

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

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

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

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

最佳答案

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

  • 您不想使用与 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 .

这是否回答了您的问题?

关于javascript - Angular2 : How to go from an "ng serve" hosting to a Node. Js托管,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41879292/

相关文章:

php - 如何为 ajax 添加/修改 jQuery 工具提示插件 - 如何添加实时功能?

javascript - WinJS URL 字段, '.com' 关键问题

javascript - ajax 多次追加到同一个 div

node.js - 获取 "first argument must be a string or Buffer"错误

Javascript:允许作为参数传递的对象方法访问公共(public)方法

node.js - Sails.js 0.10.x : Log to file

javascript - 如何从 Nodejs 中动态创建的 HTML 生成图像?

angular - 如何在 ngx-admin 主题中使用主题颜色

angular - 延迟组件的html angular 2

javascript - 移动设备上的对象 XMLHttpRequestProgressEvent 错误(Ionic、node.js)