NG Live Development Server vs Traditional web server

Question

I am new to Angular2. I have stated learning through resources in Internet.

I am using Angular-Cli tools for building my test application.

When I issue command ng serve --open I got my example project running on a default port 4200 and console shows,

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

Now I am very confused with NG Live Development Server.

I have the following concerns,

• Being a Client Side Framework why angular needs an development server.

• Where Live Server is physically Located in running machine

• The Live Server can serve only Javascript or any other language.
• What is the complexity in integrating Angular2 application with Server side frameworks like Spring-MVC.

Could anyone please provide your thoughts on this? Please correct me if I have understood the concepts wrongly.

Answer 1

Tl;Dr the cli live server is only for local development. Not for production or any environment other than local dev.

To answer your specific questions:

Being a Client Side Framework why angular needs an development server.

Angular is an SPA framework. The compiled application code needs to be loaded into the browser from a web server.

Where Live Server is physically Located in running machine

The server is part of Webpack, which is a dependency of Angular-CLI. So it is in your node_modules folder.

The Live Server can serve only Javascript or any other language.

The development server is only for running your Angular code on your local development machine. If you have a API backend, you should look at proxying requests through the dev server to your dev API.

What is the complexity in integrating Angular2 application with Server side frameworks like Spring-MVC.

This is trivial. You will not host your Angular application in production on the live dev server. Instead you will run ng build --prod --aot to build the production bundles into the project dist folder. These are the build artefacts that will be deployed to your frontend webserver. Configure the frontend to run at the root contest i.e. www.foo.com/ and the the Spring API to run at the /api context www.foo.com/api/.

Answer 2

You may want to take a look at this:

Node live server

This clearly explains what exactly is a live server and also how it works: Quoted from the link:

The server is a simple node app that serves the working directory and its subdirectories. It also watches the files for changes and when that happens, it sends a message through a web socket connection to the browser instructing it to reload. In order for the client side to support this, the server injects a small piece of JavaScript code to each requested html file. This script establishes the web socket connection and listens to the reload requests. CSS files can be refreshed without a full page reload by finding the referenced stylesheets from the DOM and tricking the browser to fetch and parse them again.

If you go through the entire post, you would get the answer to almost all your questions.