SharePoint With Angular

This article will walk you through another way to create a SharePoint project with the latest version of Angular framework without using SharePoint framework.

Prequisites

Visual Studio Code. You can download and install from Visual Studio Code
Node.js. You can download and install from Node.js
Basic knowledge of SharePoint
Knowledge of TypeScript

Below are the following reasons for not targeting the SharePoint framework.

Remove the dependencies from Yeoman generator.
We can use or update the latest Angular version.
We can use cool features of the Angular framework
Easily intregrate the third party tools or modules.

However, we are going to use Angular cli and SharePoint online to create the Angular project for this article

To known more about Angular cli use this link

In order to create a Sharepoint project using the latest Angular we have to create the following activities.

Note

The first two activities are one time activities for creating Sharepoint projects using Angular.

Create document library to store our project files.
Create a proxy for SharePoint online environment
Create Angular project and write the code for CRUD operation in sharepoint.
Integrate third party library (PrimeNg) for showing records.
Build and add Angular project to SharePoint site.

Create document library to store our project files

Step 1

Create one document library under SiteAssets and name it AngularDocs.

Step 2

Create four folders inside the library for the following reasons.

employee - To keep all Angular build files.

html - To keep html file which is referred in content editor.

css - To store the css of static html file.

images - To store all the images used in project.

Create a proxy for SharePoint Online environment

Why proxy environment

To use the SharePoint functionality locally or on localhost.

Note

It is not necessary to create the proxy for SharePoint online environment but if we do not create it, then a single change in code requires us to build the project and upload it on Sharepoint in order to see the changes.

Let's create the proxy for SharePoint Online with the following steps or refer to my previous blog Proxy With Angular 6+ And SharePoint Environment for creating proxy with different versions of SharePoint.

Step 1

To create an Angular project with Angular CLI, open the Command Prompt and type this command where proxy-server is an Angular project name.

ng new proxy-server

Step 2

Select the following options.

Would you like to add Angular routing? - n (Type n, as we do not require routing for proxy server).

Which stylesheet format would you like to use? CSS (You can choose any option, as we are not writing any css for proxy server).

Now it will install the necessary packages and files, once done open the proxy-server project in Visual Studio code.

Step 3

Install the required proxy library for our project (proxy-server) using this command. To learn more about this library follow this link

npm install sp-rest-proxy --save-dev

Step 4

Create one js file at root location and name it server.js file, paste the below code in it.

// https://github.com/koltyakov/sp-rest-proxy
// npm install sp-rest-proxy --save-dev
const RestProxy = require('sp-rest-proxy');
const settings = {
port: 8080,
};
const restProxy = new RestProxy(settings);
restProxy.serve();

Step 5

Add the below line in package.json file under scripts tag.

"serve": "node ./server.js"

Step 6

Now type the following command to start the proxy server so that it can serve the request locally or on localhost.

npm run serve

Note

When you are running the above command the first time it will ask a few questions depending upon our Sharepoint environment.

Once the above step is completed, it will create a private.json file under config folder and start serving the sharepoint request on http://localhost:8080.

Remember one thing, whenever your password changes for your SharePoint account then delete the private.json file and run the above command again.

Conclusion

In this article we have achieved our first two activities of the SharePoint project using Angular.

Simply run npm install command in the command prompt after downloding the (proxyserver.zip) project from the attachment.

Check the next part of article.

SharePoint With Angular - Part Two

3 Comments

Join the conversation! Your thoughts help the community grow.

Ralph Zero5y ago
Arvind, I've completed both part one and two successfully. I have two questions: 1. Can the Typescript call SharePoint Rest APIs directly without the Proxy Service? Are there examples of this? 2. Using the Proxy Service, can the Angular app interact with SharePoint lists from multiple sites?
Arvind Kushwaha6y ago
Hi Satish, I had already added.
Satish kumar6y ago
Hi Arvin, It's a good article. Wish to know that have you added the second part or not