Why do I need a HTTP-server to run Angular 2?

Question

I come from traditional back-end Java/Spring environment to learn Angular 2 framework, and have hard time to grasp many of the fundamental concepts.

I'm reading the Manning book Angular 2 Development with TypeScript and it says I need HTTP-server to run my SAP's. Why is that?

I thought Angular runs in client machine. So what is exactly function of the server? If I just open the HTML, Angular doesn't do its magic.

Answer 1

In fact, Angular applications suppose to be accessed using the HTTP protocol so it's a good idea to use an HTTP server for development. You will be in the "same conditions". In addition this prevents from having some limitations and restrictions:

• Absolute links relative to a domain name. I mean if you try to reference a resource with an absolute path from the root path of your domain. This won't probably work with the file protocol since its root path is the root folder of your file system
• JavaScript and AJAX. JavaScript doesn't work well with the file:// protocol and you can some security restrictions according to browsers.

See these links for more details about these issues:

• https://developer.mozilla.org/en-US/Learn/Open_a_file_in_a_browser#Opening_a_local_file
• https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Regarding the choice of a Web server, static Web servers are enough for Angular applications and there are several lightweight HTTP servers for this purpose:

• http-server - https://github.com/indexzero/http-server
• lite-server - https://github.com/johnpapa/lite-server

An interesting feature (with lite-server for example) consists in the live reload. The server detects when you updated some contents (HTML, JavaScript, CSS) and automatically reloads corresponding pages in the browser. This allows you to be more efficient when implementing your application.

Finally if you implement both client (Angular) and server sides, these parts should be executed on different servers (in development environment it could / should be different in other environments like production). I mean:

• A static HTTP server for the front end which only serves the elements for the Angular application.
• A dynamic HTTP server for the back end which provides the server-side processing. You are free here to use the technology you want (Node, Java, ...)

Because of these two servers, you must enable CORS (Cross Origin Resource Sharing) to make possible the Angular application to execute AJAX requests on the server application. As a matter of fact, you aren't on the same domain. It's something that must be configured on the server side to return CORS headers when the browser sends an Origin header in the request. For more details you can have a look at these links:

• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/
• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Another thing to be aware of if you use the routing feature of Angular is that the HTML5 history mode simulates some "real" addresses but you need in this case some configuration on your webserver to make load the index.html (your entry point file) for each URLs corresponding to each routes. See this answer for more details: When I refresh my website I get a 404. This is with Angular2 and firebase.

The last point to consider is the packaging of your application for your production environment. You need to make your application efficient (minifying elements, concating JavaScript files, preloading templates, ...). At this level, it's not necessary to keep two separate servers and the Angular part can be packaged within the server side application. In this case, the latter must be able to serve some statis files.

Hope it helps you, Thierry