Proxy With Angular 6+ And SharePoint Environment

This blog will help you in setting up the development environment for SharePoint 2013, 2016, 2019 and SP Online with Angular 6+ version which will serve the request locally.

This blog will help you in setting up the development environment for SharePoint 2013, 2016, 2019 and SP Online with Angular 6+ version which will serve the request locally.

 

To create a standalone REST-proxy project which is used for serving the client request, please refer to the following steps.

 

Firstly, create an Angular project with the help of CLI by using the site: Angular quick startup guide.

 

The project structure will look like below.

 

 

 

Then, create a config folder, place it at the root site and within the config folder, create this private.json file and keep it blank. Refer to the above snapshot.

 

Now,  we require a REST proxy solution for Angular 6+ version. To install the REST proxy solution, please run the below code on node.js command prompt at the newly created project location, i.e., SPRestProxy.

 

To explore in details, please visit - Proxy solution for SharePoint,

 

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

 

Create a JavaScript file, name it as server.js (you can have a different name), and place it at the root site. Refer to the below snapshot.

 

 

Add the below code in server.js file.

const RestProxy = require('sp-rest-proxy');
const settings = {
    port: 8080, // Local server port
};
const restProxy = new RestProxy(settings);
restProxy.serve();

In order to execute the server.js, we have to make a new entry in package.json file under Scripts section.

 

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

 

 

Now, open the node.js command prompt, visit the project location, and run the below command to start the proxy.

Note - We have added a new entry with "serve" key in package.json. Hence we will run as 'npm run serve'.

 

npm run serve

 

Depending on the environment, it will prompt a few questions like - SharePoint URL, Authentication Strategy, Credentials etc.

 

Note

I have used Authentication Strategy for SharePoint Online as - User Credentials (SAML).

 

 

OnPremises as - User credentials (NTLM)

 

 

If the above steps execute without error, then the proxy has started successfully with the highlighted text. 

 

 

 

Create the client project(contains SharePoint Codes) which will make the request to the proxy server.

 

To create the client project, use the CLI Angular (Refer part A). 

 

Create a proxy.conf.json file with the following code and place it at the root folder.

 

Note

"/sites/*": In your case, it will be different.

 

For other configuration options, refer to the Rest proxy solution.

 

proxy.conf.json

{
    "/sites/*": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/sites": "http://localhost:8080/sites"
        }
    }
}

To call the proxy.conf.json, we have to make a new entry in package.json file under scripts section.

 

"start": "ng serve --proxy-config proxy.conf.json"

 

 

Make changes to app.component.ts to call the REST API Services in SharePoint as _spPageContextInfo is undefined on localhost call.

 

app.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    GlobalObjectService
} from './services/global-object.service';
declare const _spPageContextInfo;
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    constructor(public globalObject: GlobalObjectService) {}
    ngOnInit() {
        this.globalObject.sharePointPageObject.userId = window.location.href.indexOf('localhost') > -1 ? yourID : _spPageContextInfo.userId;
        this.globalObject.sharePointPageObject.webAbsoluteUrl = window.location.href.indexOf('localhost') > -1 ? '/sites/yoursiteurl' : _spPageContextInfo.webAbsoluteUrl;
    }
}

global-object.service.ts

import {
    Injectable
} from '@angular/core';
@Injectable({
    providedIn: 'root'
})
export class GlobalObjectService {
    public sharePointPageObject = {
        userId: 0,
        webAbsoluteUrl: ''
    };
}

To create a service in Angular projects, refer to the Angular documentation on https://angular.io/guide/quickstart

 

Now, to run the client project, open node.js command prompt, visit the project location, and execute the below command.

 

Note

We have added a new entry with "start" key in package.json. Hence we will run as 'npm run start'.

 

npm run start

 

Once the node.js command prompt completes the exection, it will have a similar snapshot which will show that the server is listening on localhost:4200.

 

Now, all the client requests will be served at http://localhost:4200/.

 

 

Now, browse the http://localhost:4200/ and enjoy.