Routing is one of the key aspects of any Single Page App. This article talks about the routing aspects of Angular2 Single Page Application that is deployed inside the SitePages document library of SharePoint.
In this application, independent html files are combined/compiled into js files with the help of webpack and deployed to SitePages document library of SharePoint. This means, the folder structure that is maintained at the time of application development is not physically maintained in the deployed environment. Still , the files will be served appropriately while the routing is happening.
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 (This article)
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
6. Practical difficulties and lessons learnt on Single Page App for SharePoint Online with Angular2 and Typescript – SP Ng2 SPA Part 6
Routing Module
As I don’t want to meddle with SharePoint on routing , I have included the Hash Tag Strategy as part of routing and have set #/home as the default route if no specific route is included in the request. Same html file is reused for operation like Add, Edit and Delete operation, but its behaviour is controlled by template depending on the route. Edit and Delete operation requires the ID of the listitem to uniquely identify the item, which is passed as route parameter and been evaluated at the time when component is loaded. Based on the route param, the relevant item is pulled from SharePoint list to perform edit operation or used as an key to delete that record.
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EmployeeAddComponent } from './employee/add/employee.add.component';
import { EmployeeEditComponent } from './employee/edit/employee.edit.component';
export const RouterConfig: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{
path: 'emp',
children: [
{ path: '', redirectTo: 'add', pathMatch: 'full' },
{ path: 'add', component: EmployeeAddComponent },
{ path: 'edit/:id', component: EmployeeEditComponent }
]
}
];
Extract from “app.modules.ts”
Handling Route Param
ngOnInit() {
this.activeRoute.params.subscribe(params => {
this.Id = params['id'];
new sp.Web(AppSettings.SHAREPOINT_SITE_URL).lists.getByTitle("Employee").items.getById(+this.Id).get().then((result) => {
this.Employee = result;
console.log(this.Employee);
this.loading = "done";
}).catch((e) => { this.loading = "error"; });;
});
}
Base Href
This plays a major role while the assets are been served from SharePoint. During development build, it’s value would be “/” , so that all the assets would be picked from the root folder. As this application is deployed inside the document library of a SharePoint site, the value for base href has to be changed to the virtual path of the page that would act as landing page for this application. In my case, as I have deployed it in a site named “spa” inside a site collection, my URL is “/sites/spa/SitePages/ng2/index.aspx”. The value of base href in index.aspx is changed just before its been uploaded to SharePoint with Gulp. As I am using the gulp (plugin sp-save) to upload files to SharePoint, I am using another gulp plugin named “gulp-replace” to make these changes so that the assets that are required for Angular app would be served from correct path.
What’s Next
The next article in this series covers the build and deployment process. Although , I have covered configuration part partially in this article, I would cover the role of webpack and how the build and deployment to SharePoint is fully automated.
Leave a comment