SharePoint Framework: Angular2 Sample

SharePoint Framework: Angular2 Sample

On Yeoman

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