How to integrate ExpressJS server with Angular2

Question

I am trying to create an angular2 application with NodeJS (Express) as a server. The problem is that there is a conflict when Express tries to use its own template engine and routes requests, while angular also uses routes and index.html as an entry point.

How can I integrate both?

Answer 1

Typically, NodeJS / Express will be used to service APIs with endpoints that Angular can consume. NodeJS will be only a backend, Angular will be only an interface.

Although Angular can be serviced from a NodeJS server, it is a waste of resources since most Angular sites are completely static. That is, they are javascript, CSS and images that can be sent from S3 or FTP, and receive all their dynamic content through services (tweets from twitter, images from the S3 bucket, data from your custom NodeJS backend, etc.). In other words, no server-side rendering is required.

I would strongly recommend supporting this approach. Place your Angular application on static storage, such as S3, and create a REST API using NodeJS, which your application can talk through through Angular services. Send GET requests to receive JSON data. Take the received JSON data and use it to populate your application. Send POST , PUT and DELETE requests to add or process data (assuming you plan to have a database).

As this usually displays in your domain, you must have http://yourdomain.com for your Angular application. Then your Angular application will call the http://yourdomain.com/api/ or http://api.yourdomain.com calls that are specified in your Node API. You can configure DNS to execute any of these without the need for physical subdirectories of your code.