Wednesday, 31 August 2016

SharePoint Framework: Angular2 Sample

This post is about two firsts. My very first Angular2 app ever and my first SharePoint Framework client webPart. If you don't have your machine ready yet for the new awesome SharePoint framework follow the guide described @ https://github.com/SharePoint/sp-dev-docs to set up your environment before trying to create this angular2 sample.
Generate Client WebPart
Follow yo generator steps and at the technology stack we will choose the first option (no framework) as currently there is no option for angular2 (hopefully Microsoft will add this in a future version of SharePoint client-side solution generator)
Add Angular2 Goodness
Create a new directory under src/webPart and name it app (we will put all the angular component and module files in this directory)
Create a new file AppComponent.ts and paste the sample code below to create our Angular2 Component

Let's create our angular2 module appmodule.ts
Bootstrap Angular2 Module inside WebPart Render Method
Before we bootstrap the angular2 module we need to import the module and some other dependencies
Now let's bootstrap the angular2 module in our Angular2SampleSPFx.ts file
Install dependencies
Let's install the needed dependencies

we also need to enable experimental decorators in tsconfig.json file

Build And Try the WebPart
Let's build& run our webPart
And here is the webPart in action
Note: If you try to add multiple webParts of our Angular2SampleSPFx it simply won't work
The code sample can be found @https://github.com/ministainer/Angular2SampleSPFx

Related Articles