新答案
我的15小时经验告诉我,在开发过程中尝试使用Express提供Angular应用程序并不是一个好主意。正确的方法是在两个不同的端口上运行Angular和Express作为两个不同的应用程序。 Angular将像往常一样在端口4200上提供服务,Express将在端口3000上提供服务。然后为API调用Express应用程序配置代理。
将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 build
并将Angular应用程序放在dist目录中,由Express提供服务。在生产中,只有一个应用程序正在运行 - 一个Express应用程序提供您的Angular应用程序。
先前的答案:
从@echonax的输入中,我想出了这个解决方案,它非常快:
- 将Express添加到使用Angular CLI构建的Angular 2应用程序中,如此教程
- 在终端运行以下命令:
ng build -w & nodemon server.js --watch dist --watch server
这将重新构建Angular应用程序到dist文件夹中,每次发生更改时节点服务器都会重新启动。但是,此设置没有自动浏览器刷新:(
关于此问题请参阅此处:
https://github.com/jprichardson/reload
backend
和fronend
文件夹,将ng build
生成的index.html复制到这两个文件夹中,然后只需使用node app.js
运行我的服务器,并使用ng serve --live-reload=false
运行我的构建资源服务器,这样它就不会尝试不断重新连接WDS。我正在研究如何重定向该请求,但现在这种方法似乎可行,并且与此答案类似,只是将后端和前端分离得更加明显。 - Jay