在开发环境中将express.js与Angular CLI连接起来

Question

我发现了一个很好的教程，解释了如何设置express。js和Angular CLI，但在本教程中，Angular应用程序被编译到一个production dist文件夹中：https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

我如何将express.js与Angular CLI集成，但我希望express.js与Angular应用程序的开发版本一起工作，并且如果我对快速或角应用程序进行更改，我希望nodeme能够重新启动。

已经花了八个多小时试图让这个工作。谢谢！

我不想每次更改Angular应用程序时都运行“ng build”（这需要很长时间）-我希望在保存对Angular应用程序的更改（就像运行“ng serve”）或express应用程序时立即重新加载。

我发现了一个教程，其中您将Angular 2 QuickStart与Express连接起来，它可以工作，但我希望使用Angular CLI。

我知道Angular CLI使用WebPack，而QuickStart使用System。js

Answer 1

使用angular cli，ng build或ng build--prod命令将为您提供捆绑文件以及索引。html。制作你的应用程序。js（node/express）以该文件为目标。

示例：

app.use( express.static(__dirname + '/src' ) ); //<- it will automatically search for index.html under src folder.

Answer 2

"etayluz"解决方案是非常好的。但是我想为新答案添加一个额外的选项，以不打开两次终端。

首先要安装并发包（https://www.npmjs.com/package/concurrently）；

npm install concurrently --save 

然后您可以将以下代码添加到您的包中。json文件。

"start": "concurrently \"npm run serve-api\" \"npm run serve\"",
"serve": "ng serve --port 3333 --proxy-config proxy.config.json", // You could add --port for changing port
"serve-api": "nodemon [YOUR_EXPRESS_APP.js] --watch server",

npm start足以运行您的项目。

Answer 3

新答案

我15个小时的经验告诉我，在开发过程中试图用Express服务Angular应用程序不是一个好主意。正确的方法是在两个不同的端口上运行Angular和Express作为两个不同的应用程序。Angular将像往常一样在4200端口和3000端口提供服务。然后配置API调用到Express应用的代理。

添加代理。配置。json到Angular项目的根：

{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}

打开新的终端选项卡并运行此命令以启动Express app：

YOUR_EXPRESS_APP服务器

（您的_EXPRESS_APP.js通常命名为server.js或APP.js。server是保存所有EXPRESS APP文件的目录）

打开第二个终端选项卡并运行此命令启动Angular应用程序：

ng-serve——代理配置代理。配置。json

这将确保在对任何Angular app文件进行更改时重建Angular app并重新加载浏览器。同样，当对任何Express应用程序文件进行更改时，Express server将重新启动。

您的Angular应用程序位于此处：http://localhost:4200/

观看此视频，了解如何使用Angular CLI为API调用配置代理

注意：此设置仅适用于开发环境。在生产中，您将希望运行ng build，并将Angular应用放在Express提供的dist目录中。在生产中，只有一个应用程序在运行-一个Express应用程序为Angular应用程序提供服务。

先前的答复

使用@echonax的输入，我想出了这个非常快的解决方案：

• 将Express添加到Angular 2应用程序（使用Angular CLI构建），如本教程所示
• 在终端中运行：

ng build-w

这将把Angular应用程序重新构建到dist文件夹中，每次发生这种情况时，节点服务器都将重新启动。但是，此设置不会自动刷新浏览器：(

更多信息请参见：

https://github.com/jprichardson/reload