Friday 24 June 2016

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

7 comments:

  1. Angular2 is now with all broad scope.
    Thanks Manish

    ReplyDelete

  2. Dear Manish,

    I'm having trouble to create a SP Add-in using Angular 2 LATEST version. Do you have a seed project to develop Angular 2 SP Add-in? If you could please help me.
    Thank you very much.

    ReplyDelete
  3. Just wish to say your article is as astounding. The clearness in your
    submit is just excellent and i can suppose you’re knowledgeable in this subject.
    Well along with your permission allow me to take hold of your RSS feed to stay up
    to date with drawing close post. Thanks a million and
    please carry on the rewarding work.

    AngularJS Training in Chennai
    AngularJS Training Institute in Chennai

    AngularJS Certification Training in Chennai

    ReplyDelete
  4. I simply want to tell you that I’m all new to blogs and truly liked you’re blog site. Very likely I’m likely to bookmark your site .You surely come with remarkable articles. Cheers for sharing your website page.
    Professional movers singapore
    Movers company in singapore
    Office movers singapore

    ReplyDelete
  5. Thanks Manish For sharing such blog. I found this is very needful

    ReplyDelete
  6. I have read your blog and I gathered some needful information from your blog. Keep update your blog. Awaiting for your next update. Thanks
    DedicatedHosting4u.com

    ReplyDelete