Most Angular 2 starter projects use a development time web server. This will not work well if you are developing the application using Node and Express. An Angular 2 project works best when it is the document root of a web server. This requires a bit of careful planning.
In today’s post I will explore how to create a Express application that uses Angular 2. We will explore two separate approaches:
- A single project hosting both Node and Angular 2 code.
- Separate projects for Node and Angular 2 code.
We will use generators and official starter projects whenever possible. This will help you follow along this article and experiment quickly.
The Single Project Approach
In this approach we will have both Express and Angular 2 under a single project structure. The advantage of this approach is mainly simplicity. There is only one project to manage in version control and one project to deploy. This is suitable for simple and small projects involving a small team.
Generate the Express Project
sudo npm install express-generator -g
Create an Express project called
Install the necessary packages by running this command.
Let’s quickly test things out before going forward. Start the Express web server.
By default the generator adds a simple web service route for the “/users” end point. Run it to make sure things are working.
This should simply print out: respond with a resource.
Great! Let’s go ahead and add Angular 2 to our project.
Add Angular 2
We will use the Angular 2 starter project.
From the Express project’s root folder run this command.
git clone https://github.com/angular/quickstart.git MyAppFrontEnd
This will create a folder called
MyAppFrontEnd and add the starter project there.
Install the required packages by running this command.
While still in the
MyAppFrontEnd folder run this to compile all Typescript code.
npm run tsc
The way the Angular 2 starter project is setup, it must be the document root of the web server. That is, the web server’s static files must be served from the root of the starter project (“MyAppFrontEnd” in our case). We need to make a few changes to the Express project for this to work.
mywebapp/app.js that was generated by the Express generator. Change the document root of static files from
static as follows:
Note: You should probably delete the old
public folder now to avoid any confusion.
We need to remove the route for the “/” path that was added by the generator. This is because we need to load
MyAppFrontEnd/index.html provided by Angular 2 for the “/” path. Delete this line or comment it out.
Let’s test the changes out. Stop and start the Node server. Open a browser and enter the URL: http://localhost:3000/. You should see the home page of the Angular 2 starter app.
Now you will be able to develop your Express backend and Angular 2 front end from the same project. For example, your Angular 2 front end can now consume the web service exposed by the “/users” endpoint.
If you change any Angular 2 Typescript code you will need to recompile them from the Angular 2 root folder (
MyAppFrontEnd in our case). You can then simply refresh the browser to reload the front end code.
If you change Express code you will need to restart the server and refresh the browser.
The Separate Project Approach
Alternatively you may decide not to host the front end in the same project as the back end. In that case your Angular 2 code will reside in a separate project from your Express code. This can buy you several advantages:
- Different teams can work independently on these projects.
- The web service API may be consumed by many other web apps and mobile apps. In that case it makes sense for the web services to be in their own separate project.
- This approach lets you serve static files using a regular web server like Apache or Nginx. This frees up the single threaded Node web server to serve only web service calls. This can have a very positive impact on performance.
- You can configure SSL in a regular web server.
This approach is recommended for larger projects involving a team of several people.
The basic approach is this:
- We will serve Angular 2 files directly by a regular web server like Apache or Ngnix. Angular 2 code files are static and so this should be easy to configure.
- We will set up a reverse proxy from the web server to Node’s server. Web service calls will be forwarded by the web server to Node.
Setup the Web Server
We will now configure the web server according to the basic approach described above. First, let’s create a virtual host. This will have a document root that will point to the folder where we have Angular 2 code.
<VirtualHost _default_:80> DocumentRoot "/Library/WebServer/Documents/MyAppFrontEnd" ServerName myapp.example.com ProxyPass /api http://localhost:3000 ProxyPassReverse /api https://localhost:3000 </VirtualHost>
This is what we did here:
- The Angular 2 code will be located in
/Library/WebServer/Documents/MyAppFrontEnd. Of course, you can keep any other static files like images and CSS there. Generally speaking use a web server to server all static files.
- From the browser we will use the host name
myapp.example.comto access this app. Obviously, in your case this will be different.
- All URL requests starting with
/apiwill be routed to Node. For example, a request for
/api/userswill be routed to
http://localhost:3000/users. Note that
/apiis stripped out during forwarding. That means, you don’t have to change the routing configuration in your Express code. \o/ Yay! Just make sure that your Angular 2 front end now consumes the Express web service exposed by the
It is highly recommended that you disable static file serving from Express at this point. Simply delete or comment out the line: