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 > Start page”.

Execute this application and see the output in the browser.

Till here we have achieved one part of this setting up environment. Which is setting up sharepoint hosted app with client web part.

2. Setting up the angular application 🐵

Step 1: This section will be simple setting up an angular application. Create an application in some different place later on we will copy paste the application.

1. To create an application use “ng new Home”
2. Depending on requirement you add the routing as yes else no.
3. Have the CSS added if you need.

3. Integration of these two separate application as one 🐵

Step 1: Add a folder in sharepoint application as “App”. Copy and paste the whole angular project into this App folder.

Photo by Jason Wong on Unsplash

Grab a coffee 🥤 this is gonna take little time because of “node_modules” folder. (folder will have many files)

Step 2: Alright we have all the file and folder now, hit “Refresh” button in visual studio and “Show All Files”.

Step3: Include all the the files and folder except “node_modules”. Once you include all these files in project you will see the “Element.xml” must be updated automatically with all the files.

Note: Please don’t include “node_modules”.

Step 4: Now we have sharepoint application and angular application in one place. Now the tricky part start 👀. We will have to build (ng build) the angular application. Once you build the application you will have “dist” folder in the same location. We will have to include that folder as well in project (same as step 2 & 3).

Step 5: Now if you execute the sharepoint application you will not see the angular app content. “Bingo..! You got sharepoint application deployed.” this is written in home.aspx page as you will see in below screenshot.

We will have to include the angular “dist” folder content to home.aspx page.

if you execute further you will get the desired outcome. ✌

✌✌Awesome you got it.

Further you can do the development of the angular app as you wish and have it executed on node command prompt. Once you done with this finally you can deploy that to sharepoint at last.