Fast Track SharePoint Add-ins development using Angular2
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.
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|
Create a new NPM configuration file “package.json” with dependencies as
And devDependencies as
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”.
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:
Now install all node modules using command “npm install”
We now need to create a component in “app” module with name “app.component.ts”.
Create a new file “app/main.ts”.
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.
Add a typescript file in app module with name “vendor.ts”
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.
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.