This document summarizes a presentation on building modern SharePoint solutions using SharePoint Framework (SPFx), Angular, and Azure Functions. It discusses how SPFx can be used with Angular to build web parts with routing and dynamic bootstrapping. It also shows how Azure Functions can be leveraged as a backend API to provision SharePoint sites using PnP PowerShell and Microsoft Graph. Key lessons learned are around using Angular components within SPFx and reusing Office UI Fabric React components. Samples and resources are provided to help developers get started with this approach.

1. SharePoint Framework,Angular & Azure
Functions
The modern SharePoint developer tool belt
Sébastien Levert

2. ThankYou
EVENT Sponsors
• We appreciated you supporting the
• NewYork SharePoint Community!
• Diamond, Platinum, Gold, & Silver
have tables scattered throughout
• Please visit them and inquire about
their products & services
• To be eligible for prizes make sure
to get your bingo card stamped by
ALL sponsors
• Raffle at the end of the day and you
must be present to win!

3. EVAls / PRIZES
• Bring all items to the 6th Info Desk
• Bingo Cards = how you win prizes at
the end of the event.
• The cards must be stamped by ALL
the Sponsors by the last session
(4pm)
• Fill out speakers evaluations (located
in the front of the rooms
• Fill out the event evaluations
27 in Curved Samsung
Lenovo IdeaPad
Name your game bundle

4. Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

5. Agenda

7. SPFx + Angular

8. Angular… But which version ?
• Works well with Angular 1.6
• Works OK with Angular 2
• Works awesome with Angular 4 (Did you just say Angular 4!?)

9. Is that even possible ?
• Some are thinking it is mission impossible… But it is! And it’s much
more simpler than you think.
• You have the full power of Angular within you own SPFx webparts
• Multiple webparts can exist in a page, including their own routing
configuration

10. Introducing…
The SPFx Angular Boilerplate
(https://github.com/sebastienlevert/spfx-angular-boilerplate)

11. Dynamic Bootstrapping
protected get rootComponentType(): any {
return AppComponent;
}
protected get appDeclarationTypes(): any {
return [
DialogComponent, SitesComponent, SitesHomeComponent,
SitesFormComponent, SitesViewComponent
];
}

12. Dynamic Bootstrapping
private _bootStrapModule(): void {
var self = this;
platformBrowserDynamic().bootstrapModule(self._getModule()).then(
ngModuleRef => {
self._component = self._app['_rootComponents'][0]['_component’];
self.updateChanges();
self._zone.run(() => { console.log('Outside Done!'); });
}, err => {
console.log(err);
}
);
}

13. Dynamic Bootstrapping
const AppModule1 = Reflect.decorate([
NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routes],
declarations: declarations,
bootstrap: [component],
exports: [RouterModule],
providers: providers
}),
Reflect.metadata('design:paramtypes', [ApplicationRef, NgZone])
], AppModule);

14. Routing
const routes: Routes = [
{ path: '', component: SitesComponent, children: [
{ path: '', component: SitesHomeComponent },
{ path: 'sites', children: [
{ path: 'new', component: SitesFormComponent },
{ path: ':id', component: SitesViewComponent }
]},
]}
];
import { appRoutes } from "./app/app.routes"
protected get routes(): any {
return appRoutes;
}

15. Global Configurations
import { ConfigurationService } from
"./app/services/ConfigurationService";
ConfigurationService
{ provide: APP_INITIALIZER, useFactory: (configurationService:
ConfigurationService) => () => configurationService.load({
functionUrl: this.properties.functionUrl,
functionKey: this.properties.functionKey,
description: this.properties.description,
styles: styles
}), deps: [ConfigurationService], multi: true }

16. Mocking Data
if (Environment.type === EnvironmentType.Local) {
return [
{ provide: SitesService, useClass: MockSitesService },
];
} else if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
return [
{ provide: SitesService, useClass: SitesService },
];
}

17. Mocking Data
export class MockSitesService implements ISitesService {
public createSite(siteInformation: ISiteCreationInformation):
Observable<ISiteCreationResponse> {
return Observable.of<ISiteCreationResponse>({
description: `${siteInformation.description} (Mocked)`,
email: `${siteInformation.url}@mocked.onmicrosoft.com`,
id: "00000000-0000-0000-0000-000000000000",
title: `${siteInformation.title} (Mocked)`,
url: `#${siteInformation.url}`
}).delay(2000);
}
}

18. Lessons learned
• Never use any class or ids from the DOM. Always use theViewChild
attribute.
• You can use html templates using the require() approach.Try to do
that, React!
• When you have a strong AngularJS background, it feels just a little bit
weird to move to Angular, but you will get used to it!

19. Azure Functions

20. Why Azure Functions ?
• Cheap way to host any API in Azure
• You can use your favorite language
• Super cheap to run
• Perfect companion for any Single Page Application or any JavaScript
component

21. Our scenario
• Using the PnP PowerShell Cmdlets
• Connecting to the Microsoft Graph and to an Azure AD Application
• Creating a ModernTeam Site (in under 15 seconds) based on a set of
parameters
• Boom!

22. Make it happen

23. The full scenario
• Build a SharePoint Framework WebPart
• Use Angular as our main Framework
• Include 3 routes (Home, New Site and Site Information)
• Use Azure Function as my backend provisioning API
• Use the Office UI Fabric components

24. What about the Office UI Fabric ?
• Well…You have 2 choices : Build or Reuse
• My choice ? Reuse !
• But Seb… It’s Angular, I can’t reuse what does not exist…
• Well…The React components exist, just reuse them !

25. Next Steps

26. Resources
• https://github.com/SharePoint/sp-dev-fx-
webparts/tree/master/samples/angular2-prototype
• https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-
overview
• http://dev.office.com/fabric#/components

27. Samples
• https://github.com/sebastienlevert/spfx-angular-poc
• https://github.com/sebastienlevert/spfx-angular-boilerplate

28. Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• #AzureFunctions
• #SPFx
• Log issues & questions to the GitHub Repositories

29. Beer Authority
300 W 40h St
[across the street]
Join us for a round of drinks & some
appetizers
http://www.beerauthoritynyc.com

30. Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at