提问者:小点点

在开发环境中将express.js与Angular CLI连接起来


我发现了一个很好的教程,解释了如何设置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


共3个答案

匿名用户

新答案

我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的输入,我想出了这个非常快的解决方案:

  • 将Express添加到Angular 2应用程序(使用Angular CLI构建),如本教程所示
  • 在终端中运行:

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 buildng build--prod命令将为您提供捆绑文件以及索引。html。制作你的应用程序。js(node/express)以该文件为目标。

示例:

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