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

Question

我找到了很棒的教程，该教程解释了如何使用Angular
CLI设置express.js，但是在本教程中，角度应用程序被编译到生产dist文件夹中：https : //scotch.io/tutorials/mean-app-
with-angular- 2和角度cli

如何将express.js与Angular
CLI集成在一起，但是我希望express.js与Angular应用程序的开发版本一起使用，并且如果我对express OR
angular应用程序进行更改，我希望nodemon重新启动。

已经花费了八个多小时试图使它正常工作。谢谢！

我不想每次对Angular应用进行更改时都需要运行“ ng
build”（这会花费很长时间）-我希望在将更改保存到我的角度应用中时立即重新加载（就像我在运行“ ng serve”一样） ‘）或快递应用。

我找到了一个教程，可以在其中连接Angular 2 QuickStart和Express，它可以工作，但是我正在寻找使用Angular CLI的方法。

我了解Angular CLI使用WebPack，而QuickStart使用System.js

Answer 1

新答案

我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调用配置代理

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

上一个答案

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

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

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

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

这里的更多信息：

https://github.com/jprichardson/reload