Setting up Sharepoint Hosted App with Angular

I was having a peaceful day with me and my sharepoint until one day my boss came and told me he needed an angular application.

BOSS: I need an angular app.
ME: Ok. I need to have a platform where I can host that angular app.
BOSS: Well where have you been hosting other apps till now?
ME: On sharepoint.
BOSS: Then host the angular app on sharepoint.
ME: Whaaaat? (inside my head).
ME: Nodded my head agreeing with him.

Having a sharepoint hosted app with angular integrated is one in many possibilities which we will look into today.

This article has below Assumptions

1. You have experience on sharepoint hosted app (host web)
2. You have knowledge of angular app

We will be setting up this environment in 3 parts

1. Setting up the sharepoint application with client web part
2. Setting up the angular application
3. Integration of these two

1. Setting up the sharepoint application with client web part 🐵

Step 1: Create a sharepoint app using office “App for Sharepoint” in Visual Studio.

Further enter the your sharepoint domain address and select the sharepoint online.

Step 2: We will add a Client Web part into sharepoint app.

Before adding a web part we will delete below highlighted one.

Add a client web part in “Pages”.

Step 3: Alright let’s hit it to execute and see if this working.

Before we go and see this in browser we need to tell the app that what is the default page for this application. To do this go to “AppManifest.xml > General >…