SharePoint Framework (SPFx) WebParts Using Angular 2/4

One of the big questions arising from the current emphasis on the SharePoint Framework is whether one can use the more recent versions of Angular, specifically 2 and 4. As to AngularJs (v1.x) it has been advertised that it will work. The problem is that, in contrast with the earlier versions, 2 and 4 more or less assume that it has control of the whole page, an approach that will not work well on SharePoint pages, modern or otherwise. They are designed almost exclusively as a tool to write SPA applications. Making the assumptions that it does make it more performant and easily written, but only so long as it is used as intended.

In the (relatively) recent August 3rd community call of the SharePoint / Office 365 Dev Patterns & Practices JavaScript SIG there was a presentation by Sebastien Levert showing how to make it work. At GitHub, to see the tools to make it work and some sample code. In short, he modified the code on GitHub from Microsoft, https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype, to create a class, BaseAngularWebPart, as an adaptation of the BaseClientSideWebPart. With this one can create an SPFx webpart using Angular 2-4 and that can accommodate multiple webparts along with angular versions placed on the same page and in the same project. Still to make it all work requires significant plumbing which I summarize here for convenience's sake, but I still suggest listening to the presentation in case I have missed some nuance. For example, there are some specifics as to how to use the extra capabilities provided, as well as how Angular integrates with the OOB SPFx model. Here, then, are the steps to take as outlined by Sebastien:

  1. Angular requires a reference to the zone.js library. To prevent conflicts in case of multiple webparts, or among various angular modules,  on the same page it is necessary to reference via a cdn. In addition, one needs add the cdn reference in the config.json file. Doing this will result in the zone.js being loaded only once due to the way webpack works.
  2. Add references to core-js, reflect-metadata, rxjs (if you want the React components), and the sp-pnp-js if you want the PnP JavaScript components, along with references to the Angular components you wish to utilize.
  3. When packaging the project SPFx may complain about references not being set, or collisions with Angular and internals of SPFx webpart. To avoid this it is necessary to add the property ‘skipLibCheck’, setting it to true.
  4. Because of a bug in Angular 4, one should add to the gulp file the method build.configureWebpack.mergeConfig and in there indicate where the entry point is for the Angular code.

Having done this one can then add straight Angular code to the webpart. Again I would suggest reviewing the video referenced above from about the 23rd minute to nearly the end at 50 minutes, or at the very least clone Sebastien’s clone from GitHub, but hopefully this checklist will help.

No Comments

Add a Comment