Post
Ask Question

SharePoint With Angular - Part One

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.
 
SharePoint With Angular
 

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.
 
SharePoint With Angular
 
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.
  1. // https://github.com/koltyakov/sp-rest-proxy  
  2. // npm install sp-rest-proxy --save-dev  
  3. const RestProxy = require('sp-rest-proxy');  
  4. const settings = {  
  5.    port: 8080,  
  6. };  
  7. const restProxy = new RestProxy(settings);  
  8. restProxy.serve();   
Step 5
 
Add the below line in package.json file under scripts tag.
 
"serve": "node ./server.js"
 
SharePoint With Angular
 
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
 
SharePoint With Angular 

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.
 


Similar Articles