Angular App in SharePoint

Angular is very powerful framework and SharePoint has rich REST API Interface. Building Single Page Applications that lives in SharePoint provides an easy and fast way to build and deploy apps.

Angular CLI

Angular CLI is the way to start a new angular application. Make sure you have latest NodeJS installed. Once NodeJS is install, open command line/terminal and install angular-cli:

npm install -g @angular/cli@latest 

Once Angular CLI is installed scaffold a new project using

ng new sp-ng

after scaffolding of new project and installation of all dependencies, check that we have a working angular project using

ng serve -o

We are all ready with a working Angular project.

Support for Local Development

One of the challenge that we face for developing for SharePoint is support for local development and debugging. Andrew Koltyakov has developed a fantastic node package to enable local development support in NodeJS based applications. Grab SharePoint REST API Proxy (sp-rest-proxy) package and install this using

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

Once installed configure this using instructions on GitHub page.

Configure environment setting in Angular

Angular supports environment settings and it will be pick up correct settings when you build for production. In explorer window, find environment.ts and environment.prod.ts and and add config entries for development and production.

Install and Use PnP SharePoint JavaScript library

To inter react with SharePoint REST API, install PnP SharePoint JavaScript library :

npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save

Create a new Angular Service sp.service.ts to offload SharePoint API Communication. Here we are using fromPromise to convert Promise to an Observable.

Query SharePoint data using this service:

You should see the result on local development server on http://localhost:4200

Source code on GitHub : https://github.com/SumitRAgrawal/ng-sp/tree/master/hello-world