我找到了很棒的教程,该教程解释了如何使用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
新答案
我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应用程序提供服务。
ng build
上一个答案
使用@echonax的输入,我想到了这个解决方案,该解决方案非常快:
ng build -w & nodemon server.js --watch dist --watch server
这会将Angular应用重新构建到dist文件夹中,并且节点服务器将在每次发生时重新启动。但是,使用此设置不会自动刷新浏览器:(
这里的更多信息:
https://github.com/jprichardson/reload