Fast Track SharePoint Add-ins development using Angular2

Integrating technologies is a nightmare for software engineers! Building a SharePoint add-in using only JavaScript/jQuery involves a lot of complexities, especially the effort required in keeping the code clean and maintainable. However, the premise of integrating AngularJS and SharePoint is quite promising and that’s our Everest to peak today!

AngularJS has helped us overcome the issues pertaining to clean code and its maintainability for quite some time now. We also used it to integrate with our SharePoint Add-ins and it worked like a charm, helping us reduce a lot of development efforts. One of the best things that it provided was the ability to write modular code.

I heard about the new version Angular2 which is due to be released and was quite inquisitive about what was new in it and how I could use it to build better SharePoint applications. I started off by creating a sample application. While developing it, I thought of integrating it with a SharePoint hosted Add-in. This is where all my problems began! An app which runs with "npm start" command won't run with SharePoint.While struggling to make this work, I discovered this solution.

Step 1:

The first step is to create a new SharePoint hosted add-in in Visual Studio and then remove jQuery using NuGget package manager.

Remove jQuery using NuGet package manager

Step 2:

Create a new NPM configuration file “package.json” with dependencies as

npm dependencies

And devDependencies as

npm dependencies

Package.json will be used to download and install the required packages to run our Angular2 App. Packages under dependencies are considered crucial for the application to run and packages under devDependencies are considered vital for development which can be excluded while installing on production environment.

Now create a new TypeScript JSON Configuration file “tsconfig.json” and TypeScript Definition file “typings.json”.

tsconfig.json

typings.json

Now you can delete the folders that we won’t be using like Scripts, Images, and Content. Move default.aspx in the root directory and delete Pages folder as well. Create a new module and name it “app”. So our folder structure would look as shown below:

Folder Structure

Now install all node modules using command “npm install”

Step 3:

We now need to create a component in “app” module with name “app.component.ts”.

app.component.ts

Create a new file “app/main.ts”.

main.ts

Step 4:

Now we will configure our app for Webpack. Webpack is a very powerful bundler. Basically  it bundles the JavaScript files together and serves it to the client as a single response. Webpack will search for all the “import” statements in our application and then it creates the bundles along with its dependencies.

To use Webpack we will create a file “Webpack.config.js” and configure it to create bundles app.bundle.js and vendor.bundle.js in "dist/" folder.

webpack.config.js

Add a typescript file in app module with name “vendor.ts”

vendor.ts

Step 5:

Now before running the application, run the following command to generate the required JavaScript files.

webpack -config webpack.config.js -progress –colors

and then include the folder “dist” in your project. To do this, click on Show all files and then include the folder “dist”.

Now your solution will look like this:

Final Folder Structure

Now add references in default.aspx.

Default.aspx

Step 6:

Now we can run the SharePoint Add-in

Wasn't that easy? We can  use Angular2 to develop a SharePoint hosted add-ins with reusable and loosely coupled components. 

Reference

You can read more about Webpack with angular2 in angular2's developer guide (https://angular.io/docs/ts/latest/guide/webpack.html) or Webpack's official site (https://webpack.github.io/).





Written by Manish Patil, Angular JS Expert at Eternus Solutions