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

我发现了一个很好的教程，介绍了如何使用Angular CLI设置express.js，但在本教程中，Angular应用程序被编译到production dist文件夹中：

如何将express.js与Angular CLI集成，但我希望express.js与Angular应用程序的开发版本配合使用，并且如果我对express或Angular应用程序进行更改，我希望nodemon重新启动

我已经花了八个多小时试着让它工作。谢谢

我不想每次更改Angular应用程序时都运行“ng build”（这需要很长时间）-我希望在保存对Angular应用程序的更改（就像运行“ng serve”）或express应用程序时立即重新加载

我发现了一个教程，其中您将Angular 2 QuickStart与Express连接起来，它可以工作，但我希望使用Angular CLI

---

我知道Angular CLI使用WebPack，而QuickStart使用System.js

使用Angular CLI，

ng build

或

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.

---

app.use（express.static（u dirname+/src'）// 新答案

我15个小时的经验告诉我，尝试提供一个有角度的应用程序
在开发过程中使用Express不是一个好主意。正确的方法是在两个不同的端口上运行Angular和Express作为两个不同的应用程序。与往常一样，Angular将在4200端口提供服务，Express将在3000端口提供服务。然后为Express app的API调用配置代理

将proxy.config.json添加到Angular项目的根目录：

{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}

打开新的终端选项卡并运行此命令以启动Express app：

nodemon[YOUR_EXPRESS_APP.js]——观看服务器

（您的_EXPRESS_APP.js通常命名为server.js或APP.js。server是保存所有EXPRESS APP文件的目录）

打开第二个终端选项卡并运行此命令以启动Angular app：

ng serve——代理配置proxy.config.json

这将确保在对任何Angular app文件进行更改时重建Angular app并重新加载浏览器。同样，当对任何Express应用程序文件进行更改时，Express server将重新启动

您的Angular应用程序位于此处：

观看此视频，了解如何

注:
此设置仅适用于开发环境。在生产中，您需要运行
ng build
，并将Angular应用程序放在一个dist目录中，由Express提供服务。在生产中，只有一个应用程序正在运行——一个为您的Angular应用程序提供服务的Express应用程序

先前的答案

使用@echonax的输入，我想出了一个非常快速的解决方案：


将Express添加到Angular 2应用程序（使用Angular CLI构建），如下所示
在终端中运行此命令：

ng build-w&nodemon server.js--watch dist--watch server

这将把Angular应用程序重新构建到dist文件夹中，每次发生这种情况时，节点服务器都将重新启动。但是，此设置不会自动刷新浏览器：(

更多信息请参见：

我也想知道。Max Schwarzmüller的《平均堆栈上的Udemy课程》中有一个示例代码，用于集成Express和Angular。在该示例代码的package.json文件中，使用scripts.build属性为webpack提供一个命令，该命令监视Angular文件并相应更新。我不想复制他的代码e在这里，但这是总的想法。其余的将需要一些发现工作

在自述文件中，他建议运行运行webpack的npm run build，然后在为节点服务器运行npm start的新终端中运行。因此，理论上，这运行两个程序，就像您在答案版本中建议的那样。但是，它更“脚本化”/启动Angular build过程的预定义方式，而不是导航到Angular子目录并键入ng build——在其中查看，然后单独启动Express应用程序。
可能是您可以添加名为“”的依赖项，或（，）

然后编辑package.json，如下所示：
`

`
这可能是工作

参考资料：

示例：

示例：

示例：.
详细解释
我已经花了相当多的时间来研究如何在自己的开发环境中做到这一点。我想到的最好的方法是一个双重实现，它结合了许多echonax、Squirresareduck和Max的解决方案，但利用内置的Angular CLI策略来监视前端/角度变化，并使用nodemon来监视后端/Express发生了变化。其缺点是您最终运行两个进程（ng build和nodemon）来启动并运行您的开发环境，但它会在一台Express web服务器下自动重建并运行所有内容

您需要运行的第一个过程是构建Angulardist文件夹，并查看Angular前端的任何更改。幸运的是，Angular CLI可以通过以下命令以本机方式完成此操作（在Angular CLI>=1.5上测试）：

ng build --watch

您需要让它在后台运行，但这将监视Angular代码中所做的任何更改，并动态地重新构建包

第二个过程涉及使用nodemon运行Express服务器，可能需要更多的设置和规划，具体取决于后端/Express设置的范围。只需确保Express指向dist文件夹中的索引文件即可。这里的最大优点是，您可以使用在运行nodemon以查看后端/Express后，吞下nodemon以执行更多的连续任务，例如，将后端磨平、运行与构建并行的测试、缩小后端，或任何您可以想到的使用gulp的其他任务。使用npm或纱线
"scripts": {
        "dev": "concurrently \"ng build -w\"  \"cross-env NODE_ENV=development node .\" "
    }

ng build --watch

nodemon app.js

ng build --watch

nodemon app.js

npm install concurrently --save 

"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",

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

"scripts": {
    "client": "ng serve",
    "server": "nodemon back.js",
    "start": "npm-run-all -p client server"
  }