在开发环境中使用Angular CLI连接express.js

新答案

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

将proxy.config.json添加到Angular项目的根目录中：

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

打开一个新的终端选项卡，然后运行以下命令以启动Express应用程序：

nodemon [YOUR_EXPRESS_APP.js] --watch server

（YOUR_EXPRESS_APP.js通常被命名为server.js或app.js。server是您保留所有Express应用程序文件的目录）

打开第二个终端选项卡，然后运行以下命令以启动Angular应用程序：

ng serve --proxy-config proxy.config.json

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

您的Angular应用程序在这里：http：// localhost：4200 /

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

注意：此设置仅适用于开发环境。在生产中，您将需要运行

ngbuild

上一个答案

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

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

ng build -w & nodemon server.js --watch dist --watch server

这会将Angular应用重新构建到dist文件夹中，并且节点服务器将在每次发生时重新启动。但是，使用此设置不会自动刷新浏览器：(

这里的更多信息：

https://github.com/jprichardson/reload