在开发环境中使用 Angular CLI 连接 express.js [英] Hooking up express.js with Angular CLI in dev environment

问题描述

我找到了一个很好的教程，它解释了如何使用 Angular CLI 设置 express.js，但在本教程中，angular 应用程序被编译到一个生产环境的 dist 文件夹中:https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

I found a great tutorial that explains how to setup express.js with Angular CLI, but in this tutorial the angular app is compiled into a production dist folder: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

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

How do I integrate express.js with Angular CLI, but I want the express.js to work with the development version of the Angular app and I want the nodemon to restart if I make changes to either the express OR angular app.

已经花费了超过八个小时试图让它发挥作用.谢谢！

Have been spending over eight hours trying to get this working. Thanks!

我不想在每次对 Angular 应用程序进行更改时都运行ng build"(这需要很长时间) - 我希望在我保存对 Angular 应用程序的更改时立即重新加载(就像我正在运行一样)'ng serve') 或快速应用.

I don't want to run 'ng build' every time I make a change to the Angular app (this takes too long) - I want instant reloading whenever I save a change to my angular app (as if I was running 'ng serve') or express app.

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

I found a tutorial where you hook up Angular 2 QuickStart with Express, it works but I'm looking to use Angular CLI.

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

I understand that the Angular CLI uses WebPack whereas the QuickStart uses System.js

推荐答案

NEW ANSWER

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

My experience of 15 hours has taught me that trying to serve an Angular app with Express during development is NOT a good idea. The proper way is to run Angular and Express as two different apps on two different ports. Angular will be served on port 4200 and Express on port 3000 as usual. Then configure a proxy for API calls to Express app.

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

Add proxy.config.json to root of Angular project:

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

打开一个新的终端选项卡并运行此命令以启动 Express 应用程序:

Open up a new terminal tab and run this command to start Express app:

nodemon [YOUR_EXPRESS_APP.js] --watch 服务器

(YOUR_EXPRESS_APP.js 通常被命名为 server.js 或 app.js.server 是您保存所有 Express 应用程序文件的目录)

(YOUR_EXPRESS_APP.js is usually named server.js or app.js. server is a directory where you keep all your Express app files)

打开第二个终端选项卡并运行此命令以启动 Angular 应用程序:

Open up a second terminal tab and run this command to start Angular app:

ng serve --proxy-config proxy.config.json

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

This will ensure that Angular app is rebuilt and browser reloaded when a change is made to any Angular app file. Similarly, Express server will restart when a change is made to any Express app files.

您的 Angular 应用程序在这里:http://localhost:4200/

Your Angular app is here: http://localhost:4200/

观看此视频，了解如何使用 Angular CLI 为 API 调用配置代理

Watch this video to see how to configure a proxy for your API calls with Angular CLI

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

NOTE: this setup only applies for development environment. In production, you will want to run ng build and place the Angular app inside a dist directory to be served up by Express. In production, there is only ONE app running - an Express app serving up your Angular app.

以前的回答

使用来自@echonax 的输入，我想出了这个非常快的解决方案:

Using input from @echonax I came up with this solution which is quite fast:

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

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

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

This will rebuild the Angular app into the dist folder, and the node server will restart each time that happens. However, there is NOT automatic browser refresh with this setup :(

更多相关信息:

https://github.com/jprichardson/reload

这篇关于在开发环境中使用 Angular CLI 连接 express.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！