在开发环境中使用Angular CLI连接express.js

我find了一个很好的教程,解释了如何使用Angular CLI设置express.js,但在本教程中,angular度应用程序被编译到生产dist文件夹中: https : //scotch.io/tutorials/mean-app-with-angular- 2 -和-的棱angular-CLI

如何将express.js与Angular CLI集成,但我希望express.js能够与Angular应用程序的开发版本一起工作,并且如果我更改了express或angular应用程序,我希望nodemon重新启动。

已经花了八个小时试图让这个工作。 谢谢!

我不想在每次修改Angular应用程序时运行“ng build”(这需要太长的时间) – 我想要在我的angular度应用程序中保存更改时立即重新加载(就像我正在运行'ng serve ')或表示应用程序。

我find了一个教程,在这里你使用Express来连接Angular 2 QuickStart,它可以工作,但是我正在使用Angular CLI。

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

新的答案

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

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

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

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

nodemon [YOUR_EXPRESS_APP.js] --watch server

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

打开第二个terminal标签,运行这个命令来启动Angular应用程序:

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

这将确保在对任何Angular应用程序文件进行更改时,重新生成Angular应用程序并重新加载浏览器。 同样,Express服务器将在任何Express应用程序文件发生更改时重新启动。

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

观看此video,了解如何使用Angular CLI为您的API调用configuration代理

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

先前的回答

使用来自@echonax的input我想出了这个相当快的解决scheme:

  • 在本教程中添加Express到Angular 2应用程序(使用Angular CLI构build)
  • 在terminal运行这个:

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

这将重buildAngular应用程序到dist文件夹中,并且节点服务器将在每次发生时重新启动。 但是,这没有自动浏览器刷新这个设置:(

更多的在这里:

https://github.com/jprichardson/reload

使用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. 

我也想知道这一点。 MaxSchwarzmüller在MEAN栈上的Udemy课程中有一个示例代码,用于集成Express和Angular。 在示例代码的package.json文件中,使用scripts.build属性给webpack一个命令,该命令监视angular度文件并相应地进行更新。 我不想在这里复制他的代码,但这是一般的想法。 其余的将需要一些发现工作。

在自述文件中,他build议运行运行webpack的npm run build,然后在运行npm start的新terminal上运行节点服务器。 所以在理论上,这个程序运行了两个程序,就像你在你的答案中提出的那样。 但是,它会启动更多的“脚本化”/预定义的方式来启动Angular构build过程,而不是导航到Angular子目录,然后在那里键入ng build –watch,然后单独启动Express应用程序。

也许你可以添加一个名为“ 并发 ”的依赖,或者( npm-run-all , parallelshell )。

 npm i concurrently --save-dev 

然后像这样编辑package.json:`

 "scripts": { "dev": "concurrently \"ng build -w\" \"cross-env NODE_ENV=development node .\" " } 

“这可能是工作。

参考文献:

同时举例: https : //stackoverflow.com/a/30950298/7421101 ,

npm-run-all示例: https : //stackoverflow.com/a/38213212/7421101 ,

parallelshell示例: https : //stackoverflow.com/a/42373547/7421101 。