我发现了一个很好的教程,解释了如何设置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
新答案
我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的输入,我想出了这个非常快的解决方案:
ng build-w
这将把Angular应用程序重新构建到dist文件夹中,每次发生这种情况时,节点服务器都将重新启动。但是,此设置不会自动刷新浏览器:(
更多信息请参见:
https://github.com/jprichardson/reload
"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
足以运行您的项目。
使用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.