Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When running "ng serve --watch" how does the browser know when to refresh when there is any change to the sources?

I'm using angular-cli 1.6.5 node 6.9.1. I'm running my app using the following command:

ng serve --watch

When I make changes to my typescript or HTML sources (e.g. app.component.ts), the browser automatically refreshes.

My question is, how does the browser know when to refresh? I don't see any requests being sent out from the browser to the app and vice versa. And I couldn't see network traffic on my browser other than when the page refreshes.

For clarity, my question is not about how Angular detects changes on DOM elements or model objects bound to it.

like image 992
supertonsky Avatar asked Feb 04 '18 06:02

supertonsky


People also ask

How does angular ng serve work?

ng serve is a great command to use when developing your application locally. It starts up a local development server, which will serve your application while you are developing it. It is not meant to be used for a production environment.

What is ng serve-- watch?

ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically.

What is Ng serve command in angular?

When you use the ng serve command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files. When you run ng new my-first-project a new folder, named my-first-project , will be created in the current working directory.

What is serve in angular?

ng serve command builds and serve the application. It rebuilds the application if changes occur. Here project is the name of the application as defined in angular.


Video Answer


1 Answers

Web Sockets.

ng serve starts a server which watches for file changes and sends a web socket message to the client with a new hash.

By making the network slower in chrome dev tools we will be able to see the websocket messages as they are sent to the browser:

enter image description here

Make a file change:

enter image description here

like image 108
Tom Avatar answered Oct 18 '22 19:10

Tom