How can I use Angular 2 in SPFX?

I appreciate its not out of beta quite yet but I have found it to be excellent for 'larger' apps. Especially RC5 which provides a new ngModule decorator.

Using this decorator how do I write an SPFX Webpart that will bootstrap an Angular 2 module?

Once bootstrapped how will I implement Angular 2 routes in a web part?

  • Angular works a bit differently as in it bootstraps to the DOM element and can have only one per page. This becomes tricky for putting multiple angular web parts on the same page. Angular 2, if i am not wrong, cannot bootstrap the app to a DOM element. Hence, we are looking into ways on how to enable support for Angular in SPFx. Aug 21, 2016 at 2:02

1 Answer 1


I would be careful about implementing Angular routes in Web Parts (no matter if it's Angular 1 or 2). Imagine that you would have multiple Web Parts on the page each with each own set of routes persisted through the URL. Changing the route in one Web Part would update the URL resetting all other Web Parts on the page. That could be perceived as confusing by end-users. To avoid this you would need to use UI Router which doesn't use the URL for persisting route state.

  • Thanks Waldek I take your point but in some cases all of the web parts will want to respond to the state change (poor man's web part linking I guess) still it maybe that waiting for SPAs is the way to go. The other issues are maintaining the browser back button so that the page responds correctly and also being able to provide a 'stateful' URL. Aug 30, 2016 at 7:16
  • If all Web Parts are so much connected to a single state then I believe building a SPA, where you can ensure that all elements are on the page would make more sense. Aug 31, 2016 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.