在开发环境中使用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应用程序的开发版本一起使用,如果我对快速OR角度应用程序进行更改,我希望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 build并将Angular应用程序放在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

Answer 2

"etayluz"解决方案非常好.但我想为NEW ANSWER添加一个额外的选项,以便不打开两次终端.

首先你必须同时安装包(https://www.npmjs.com/package/concurrently);

npm install concurrently --save 

然后,您可以将以下代码添加到package.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 足以运行您的项目.

Answer 3

使用angular-cli,ng buildor ng build --prod命令会为你提供捆绑文件和一个index.html.使app.js(node/express)目标成为此文件.

例:

app.use( express.static(__dirname + '/src' ) ); //<- it will automatically search for index.html under src folder.