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.
- 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.
- 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.
- 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.