如何在nodeJS应用程序中启动angular2答案

【问题标题】：how to start angular2 inside nodeJS application如何在nodeJS应用程序中启动angular2
【发布时间】：2017-06-25 15:13:05
【问题描述】：

这个看似简单的问题现在卡住了我的大脑，希望得到你的帮助。

我现在正在使用 webpack 启动 angular2 应用程序，没关系，只需运行 npm start，实际上，它正在运行此命令来提升 angular2 项目

webpack-dev-server --inline --progress --port 8080

现在一切都很好，直到我想开始实际开发。我们实际的开发是用nodeJS，我想用nodeJS来提升整个angular2项目。我知道我可以使用 npm build 来构建 Angular 项目，然后在 nodeJS/express 中使用静态页面来 loda 那个静态页面。这适用于部署或生产环境。但是对于开发，我该怎么做呢？

如上所述，我使用webpack-dev-server来boost ng2项目，其中读取了很多webpack.configuration，例如type script loader，sass loader，默认是8080端口，但是在我的nodeJs项目中，它是使用“node app”启动的，端口是3000。显然，这里造成了跨域问题。

那么是否可以让nodeJS在ng2中提升我的本地开发环境以避免跨域问题？如果我使用 nodeJS，那么 webpack 解决方案去哪里了？

希望听到你的建议

【问题讨论】：

您需要做的就是处理 CORS 问题以实现顺畅的开发工作流程，首先，您可以在 nodejs 配置中允许 CORS，其次，您需要为 chrome 安装 CORS 插件。
所以建议将nodeJS和ng2分开启动，确保ng2可以通过CORS访问nodeJS应用。并且在生产环境中，可以将ng2构建的文件放入静态目录并让nodeJS加载它
是的，它应该从采用 SPA 的概念开始。

标签： node.js angular webpack

【解决方案1】：

您可以尝试两种解决方案。在这两个服务器中，您都需要有 2 个服务器：webpack 和您的。两者都适用于任何后端。

在您的服务器响应上启用 CORS。这可能很棘手。此外，它并没有真正复制生产行为（文件夹结构、URL 路径等）
将所有非 webpack 输出代理到您的服务器。这是通过 webpack 配置中的几行代码实现的，但它非常好，因为您仍然可以看到非 Angular 页面、内容、静态文件等，就像您在生产中看到的一样。还有什么好处是，您可以将您的生产（阶段、开发等）服务器指定为目标，并且根本没有在您的计算机上运行后端。

这是操作方法：

devServer: {
   port: 8080,
   proxy: { '**': { target: 'http://localhost:3000', secure: false, headers } }
 },

这将在 8080 上启动 Angular 服务器并将任何非 webpack 生成的文件重定向到目标。

【讨论】：