The source code for this series of articles on SharePoint Single Page app built with Angular 2, SP PnP Js Core and Webpack is available in Github for download. Once you have downloaded the files or have cloned the repository, follow the below steps to make it as a working version.
Clone
To clone the repository from github, execute the below command in console
git clone https://github.com/AshokRajaT/Angular2-SharePoint-SPA.git sp2
Download
To manually download the application, navigate to https://github.com/AshokRajaT/Angular2-SharePoint-SPA and select the download option.
Once the source code is downloaded or cloned, execute the command “npm install” from the command prompt to install all the project dependencies and development dependencies. This may take couple of minutes depending upon your network bandwidth.
The alternate option to use Yarn package manager for installing node modules. Yarn maintains a local copy of node modules, so that, the existing packages would be served from the local file system instead of been pulled from online. Yarn also helps to maintain a specific version of node package across your development team instead of each and every developer having a different version of node modules.
List of articles in this series
2. SharePoint list data CRUD operation with PnP Core Js and Angular2 – SP Ng2 SPA Part 2
3. Angular2 routing inside SharePoint SitePages Document Library – SP Ng2 SPA Part 3
4. Configuring webpack for Angular 2 development and production build – SP Ng2 SPA Part 4
5. Downloading source code and deployment steps – SP Ng2 SPA Part 5 (This article)
6. Practical difficulties and lessons learnt on Single Page App for SharePoint Online with Angular2 and Typescript – SP Ng2 SPA Part 6
Pre-requisites and changes that are required
As this application is deployed in SharePoint, couple of environment specific changes has to be performed before it been deployed in your SharePoint environment.
1. SharePoint credentials in a settings file
This file is not included in the source available in git. This has to be manually created once you have cloned the project to your local environment. Create a folder named “_private” and add a file named “settings.js”. Add entries for “username”, “password” and “siteUrl” as shown below. This information is required to upload files to SharePoint Online.
2. Changing the SharePoint (target) URL
Apart from the site URL that’s been specified in settings.js file, the site URL is also been required in the file “app.settings.ts” file located inside “shared” folder located inside src=>app
3. Changing the zone.js
I won’t recommend this, but there is no other option for the time being. As one of the SharePoint Online library contains a function called “zone”, the zone.js that is deployed with the Angular App will fail to load. To overcome this issue, the validation code in zone.js has to be commented. This has to be done till Microsoft encapsulates the global zone function. To make the changes, navigate to [Project Folder]\node_modules\zone.js\dist and comment the line “throw new Error(‘Zone already loaded.’);” in zone.js file
4. Changing base href in index.aspx and employee.aspx
The changes to index.aspx is performed via gulp plugin at the time of upload to SharePoint. So the gulpfile.js should contain the appropriate URL that has to be replaced instead of <base href=”/”>. Replace the value in the gulp task named “changeBase” to the respective URL of your environment.
The next change is a direct change in “Employee.aspx” located inside “src” folder. Change the value of “href” to the value appropriate to your environment.
5. Source List in SharePoint
To run the source code as is, you would require a custom list named “Employee” in the SharePoint site that you have mentioned in “app.settings.ts” (Refer point 2). Apart from the Title field, create three other field named “Location”, “Designation” and “Email”. Add couple of records in that list if you wish to have the dashboard pre-populated with data once the application is loaded.
6. Gulp as global module
Although this application does not require gulp for development and build process, gulp is required to perform upload build output to SharePoint. As I am using sp-save gulp module for upload to SharePoint, gulp is required in both local mode and global mode. Locally gulp would have installed while you have executed “npm install” in first step. To globally install gulp , execute the command “npm install gulp -g” in the console.
7. Version of Typescript and webpack awesome-typescript-loader (Hope it would get resolved soon)
At this time of writing this article, the recent version of Typescript doesn’t go well with the “awesome-typescript-loader” module of webpack. To overcome the incompatibility issue ensure that the version of typescript in your environment is <= 2.0.10
Now your application is ready to be built and deployed to SharePoint environment. To run it locally you may require “SP Rest Proxy” to act as a proxy server to handle CORS. Execute the command “npm start” to run the web pack dev server.
To perform a production build, execute the command
npm run build
If there are no errors in your code, this would create a folder named “dist” and the compiled output would be moved to that folder. The next step is to push the output files to SharePoint. To perform that operation, execute the command
gulp spsave
This would move the contents of the dist folder to a folder named “ng2” inside “SitePages” document library. If you wish to deploy it to a different location, change the value for folder in the gulp task “spsave” available in gulpfile.js of the project.
VS Code and Git
This is for people who haven’t started using VS Code as their primary IDE. If you are already into SPFx , I am sure you would have made the switch to VS Code. If you are still sticking to Visual Studio and TFS or SVN, it’s time to move on. If Visual Studio Online is your source code repository, then there is an option to switch to git instead of TFS. If your application (Front End Part) is fully relying on JavaScript and REST API like this application, then VS Code is would be the best choice.
Reaching me
If you have any queries or you are not able to successfully build or deploy the application you can reach me out on twitter
Leave a comment