DEV Community

Mohammad Talha Noman
Mohammad Talha Noman

Posted on

2 1

Reusable Angular Vendor for SharePoint

I have been working with AngularJS to develop SharePoint Apps. Now I wanted to develop new SharePoint Apps with Angular 4 with all the awesomeness of new open source tools and build chains like Typescript, WebPack, GulpJS etc.

So I started building the app as guide lines provided by Angular Docs. The scenario is for single angular application on a page so CommonsChunkPlugin plays very well in order to eliminate common code from multiple bundles. But it develops module resolution structure only specific to the files in that application. So, you cannot use the vendor files for another application.

In context of SharePoint I would like to have single vendor file and all the SharePoint Apps/WebParts should use the same vendor otherwise it will end up multiple vendor files with duplicate code.

I came across an interesting article Optimizing Webpack build times and improving caching with DLL bundles. It helped me solve the issue in SharePoint world, so now I can have single vendor file. You may read more about WebPack DllPlugin.

The main idea is to structure the application in two parts vendor bundle build once and deploy to SharePoint site. Application/WebPart bundle to refer the vendor bundle. There can be many Applications/WebParts on the same page.

Vendor Bundle

In Vendor Bundle project install following npm packages:

  1. @angular/animations
  2. @angular/common
  3. @angular/compiler
  4. @angular/core
  5. @angular/forms
  6. @angular/http
  7. @angular/platform-browser
  8. @angular/platform-browser-dynamic
  9. @angular/platform-server
  10. @angular/router
  11. core-js
  12. rxjs
  13. zone.js
  14. awesome-typescript-loader
  15. source-map-loader
  16. typescript
  17. webpack

Create a WebPack configuration, tsconfig and vendor files in the root of the project.

Edit package.json file and paste following:

  "scripts": { 
     "build": "webpack –config ./webpack.vendor.config.js –progress –profile – bail",
     ...
   }
  ...
Enter fullscreen mode Exit fullscreen mode

Open command line and execute "npm run build". It will generate vendor.js contains all the base code from Angular and RxJS, also vendor-manifest.json file contains all the reference about how to resolve the different modules from vendor.js. We will be using this file in the SharePoint Application/WebPart. You must publish these file as a npm package to your private/public registry to consume it.

Application Bundle

In order to create application you have to follow the guidelines as mentioned in the Angular Docs, also we need to do some extra work. Install "vendor" package which we have built above and WebPack configuration file. Change the path of directories based on your application structure. As you may notice I have used DllReferencePlugin in the consumer/application project which provides information to WebPack from where to resolve the modules.

This approach will not only eliminate duplicate code, but also reduce the build time as well because main chunk of code is coming from Angular which we have already bundled.

Originally posted on Medium Blog Posting

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay