0

I have an Express app bundled with an Angular 2 app that I run together as such:

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

Basically, whenever a file is saved the angular app is rebuilt, and that ultimately triggers the node server to restart as well.

Additionally, I would like to reload the app on the browser so that I don't have to reload it manually. What is the best way of doing this? Previously, when I was using ng serve the browser reload was done by WebPack

etayluz
  • 15,920
  • 23
  • 106
  • 151
  • The only efficient way is to do via websocket. Using websocket you can trigger an event for reload and catch it in angular app and reload the app. Webpack is development tool but in production you have just the build so whatever you want to do that is in the build. Webpack add some additional files as well to control the development environment. Good luck – Babar Hussain Mar 20 '17 at 20:03
  • Can you give an example of how to do this? I only care about dev enironment – etayluz Mar 20 '17 at 20:04
  • socket.io: https://socket.io/docs/, and complete tutorial is here http://www.syntaxsuccess.com/viewarticle/socket.io-with-rxjs-in-angular-2.0 – Babar Hussain Mar 20 '17 at 20:16
  • follow above links it have complete examples – Babar Hussain Mar 20 '17 at 20:17
  • No need to make it yourself with sockets like @BabarBilal suggests, there are already tools for refreshing the browser such as this one: https://github.com/jprichardson/reload – Adam Mar 20 '17 at 21:46
  • @Adam I tried Reload but I couldn't figure out how to integrate it with the Angular 2 index.html file. If you could help that would be great! – etayluz Mar 20 '17 at 22:31
  • You just need to drop a line of code into your express server, and then add the script to your index.html page. They have a minimal example here: https://github.com/jprichardson/reload/tree/master/expressSampleApp – Adam Mar 20 '17 at 22:32
  • I tried that. However, the app cannot find reload.js. How do I reference reload.js in the Angular app index.js so it can find it? I'm using WebPack to package the app into a dist folder which is served by Express app – etayluz Mar 20 '17 at 22:35

1 Answers1

0

Check the first answer here Hooking up express.js with Angular CLI in dev environment

Copying answer here

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.

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

{ api/*":{ "target":"http://localhost:3000", "secure":false, "logLevel":"debug" } } Open up a new terminal tab and run this command to start Express app:

nodemon [YOUR_EXPRESS_APP.js] --watch server

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

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

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

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.

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

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

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.

Shawn Cicoria
  • 594
  • 8
  • 14