Connecting Angular 5 App to MongoDB Database

5 min readJul 16, 2018

So connecting the angular 5 App to the MongoDB Database on MLab. This was indeed one of the most challenging tasks this GSOC, especially due to the lack of tutorials which talked about how to Connect an existing Angular App to the MEAN stack!

So, I hope this tutorial helps future versions of me do the task! :D

In case you already have an Angular App ready, feel free to move to Step 2.

Step 1 : Create a basic Angular 5 App using Angular CLI

Open the terminal and install the Angular CLI.

sudo npm install -g @angular/cli

So, we have installed the Command Line interface for AngularJS. Time to create the new angular App.

Type in the next command :

ng new <name-of-the-app>

Let’s change the directory into our app.

cd <name-of-the-app>

Time to test our Angular App! :)
ng serve -o

The following page opens up on our browser:

Yay! Our Angular app is working :D

Step 2 : Let us install Express, Mongoose and body parser.

npm install express — save

npm install mongoose — save

npm install body-parser --save

I read these 3 commands in a lot of blogs online. But why!? I wondered..

Let’s come to the first command. We are installing express.

What is express and why is it being used here?

Express is a routing and middleware web framework that has minimal functionality of its own and is essentially a series of middleware function calls. Middleware functions are functions that have access to the request object(req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

Mongoose helps us connect from NodeJS app to the MongoDB database.

Body-Parser is a body-parsing middleware which allows us to parse the incoming request bodies in a middleware before your handlers, available under the req.body property come into effect.

Step 3 : Create a new file server.js

Open the server.js file in the text editor.

Line 1–4 helps us use the packages we had imported. Next we instantiate a MongoDB database locally in lines 5–9, wherein in case of an error and the DB being unable to connect we throw the error to the user. Line number 18–24 allows us to define the headers.

res.setHeader(‘Access-Control-Allow-Origin’, ‘http://localhost:4200') allows us to define the website we wish to connect to, which in our case is http://localhost:4200.

res.setHeader(‘Access-Control-Allow-Methods’, ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’) helps us define the request methods we wish to allow in our code.

res.setHeader(‘Access-Control-Allow-Headers’, ‘X-Requested-With,content-type’) defines the request headers we wish to allow.

res.setHeader(‘Access-Control-Allow-Credentials’, true) allows the website to include cookies in the request sent to the API.

Line 26–31 helps us define our database schema. In our example we are only going to store the name and address of the user which are both Strings. In line 36–87 we have defined our API calls, which allow us to store, update, find and delete the user data from the database.

Step 4 :

Create a new Angular Service for common AJAX API calling.

ng g s common -spec=false

Open src/app/common.service.ts and insert the code as below there:

In app.module.ts insert the below code :

In app.component.ts insert the below code :

Finally, we update the HTML of our app to display the data!

Step 5 : Time to run our app! :D

1) Run the local instance of mongoDB using mongod

A couple of similar looking commands come onto the terminal and the pointer waits there, waiting for connections to be established to the MongoDB Daemon.

2) Run the nodeJS server using the command node server.js