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",
     ...
   }
  ...

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