Angular 2 : Documentation

[rolandoldengarm]

So far I haven't seen any mention of Angular 2 in relationship to the SP Framework. ng2 is almost public release, so it's good to provide some guidance. I'll do my best to publish a blog post about this in the next week or so.

[patmill]

Yup - we were discussing the right way to cleanly integrate Angular an hour ago. The tricky thing is how the framework can help deal with the singleton nature of the Angular App. One webpart works no problem, but multiple webparts on a page get tricky. We hope to handle it similar to how we deal with React, where the framework understands that there really should be only one instance available. I created a placeholder here for where we will put our thoughts / info - https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-Angular

[rolandoldengarm]

Good stuff. It will work differently between ng1 and ng2 though.

I'm not familiar with React, but wouldn't a solution be:

• The SPFrameWork loads the root component, e.g. my-app. So there is one instance of on the page.
• For every web part you defined a component, e.g. my-webpart-1, my-webpart-2, so the template of a web part is eg , and Angular does the rest.

The entry point of the web part project (default vanilla project) is a web part, this could be the app.component.ts with the root component, which then somehow loads the components of the web parts?

[jmmartinez84]

I've working with angular 1.x and sharepoint for almost 2 years creating webparts.
I always use a manual angular bootstrap for each WebPart something like this:
function () {
var containers = document.getElementsByClassName("content");
angular.forEach(containers, function (container, index) {
angular.bootstrap(container, ["worldClock"]);
});
}
https://github.com/jmmartinez84/clock-js/blob/master/Script/main.js

I hope it helps.

[waldekmastykarz]

This works with Angular 1 but not with Angular 2 which doesn't support bootstrapping a specific DOM element.

[patmill]

I don't think it's too tricky to come up with a way for an individual developer to make multiple controls work, However we need to come up with a way (at least prescriptive, hopefully 'it just works') for different developers to create solutions that work together by default.

[ericgrover]

a quick guide on how to bootstrap an Angular 2 app in a single webpart would be helpful!

[amrfouad22]

Hi @ericgrover I've created a sample webpart using SPFx and Angular2 I'm a newbie in Angular2 and it's the simplest webpart ever
check https://github.com/ministainer/Angular2SampleSPFx , complete walkthrough is here (http://www.sharepointtweaks.com/2016/08/sharepoint-framework-angular2-sample.html)

[ericgrover]

Excellent. Thanks!

From: Amr Fouad [mailto:notifications@github.com]
Sent: Wednesday, August 31, 2016 1:26 PM
To: SharePoint/sp-dev-docs sp-dev-docs@noreply.github.com
Cc: Eric Grover eric@ericgrover.com; Mention mention@noreply.github.com
Subject: Re: [SharePoint/sp-dev-docs] Angular 2 : Documentation (#7)

Hi @ericgrover https://github.com/ericgrover I've created a sample webpart using SPFx and Angular2 I'm a newbie in Angular2 and it's the simplest webpart ever
check https://github.com/ministainer/Angular2SampleSPFx , complete walkthrough is here (http://www.sharepointtweaks.com/2016/08/sharepoint-framework-angular2-sample.html)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #7 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AGu3rr3G5axjsNkwocoqvuT9IEhZMPIIks5qlbk-gaJpZM4Jm_vs . https://github.com/notifications/beacon/AGu3rjQL3ZRESKOuLKw9O2ivJRHvQQB5ks5qlbk-gaJpZM4Jm_vs.gif

[rolandoldengarm]

That's awesome! @ministainer

[patmill]

Have you managed to be able to instantiate multiple instances of the control / different controls on a single page?

[amrfouad22]

@patmill nop , as far as i know (I'm angular2 newbie) Angular2 only support single root component. the above example encapsulates the webpart within single module and single root component.
The solution if we can define a root component that contains all webparts on the page
Maybe if we have an angular2 option which supports this scenario

[rolandoldengarm]

Yeah I tried as well, and when you try to bootstrap twice, you'll get the error "Error: Zone already loaded. "

I don't think there is a solution for Angular 2 with the current tool set.

[rolandoldengarm]

Is there any update on this?

[plakhlani]

I also wanted to know update on this. I am open to make contributions if required on this, please feel free to connect/contact.

[andrewconnell]

Angular 2 works with SPFx, but only for a single client web part on the page. Angular 2, for performance reasons, is architected so the developer declares everything that goes on the page at development time. That doesn't work for composable pages like web part pages in SharePoint.

Therefore, from my POV ng2 & SPFx aren't compatible at this time.

However, the Angular2 team is aware of this and looking at ways to resolve. I'm working with the Angular engineering team @ Google to crack this nut. The goal isn't to solve this "issue" with SPFx, rather to solve this issue in Angular2 for more than just the SPFx.

IMHO, this issue can be closed.

[StefanSchoof]

Is there an issue in angular project to watch progress and discussion?

[rolandoldengarm]

Good stuff @andrewconnell
But I don't agree this issue can be closed. The issue originally was about documenting how to use SPFX with Angular2. That still has to happen, even when it's possible in Angular2 to use it with SPFX :)

[andrewconnell]

@StefanSchoof - Is there an issue in angular project to watch progress and discussion?

No... not ATM that I'm aware of.

[andrewconnell]

@rolandoldengarm Sure it does... but its not possible now so leaving it open seems silly to me. That's sort of like creating an issue to document how to use SPFx with my toaster... can't do it today, but maybe one day... so let's leave it open

[amrfouad22]

@StefanSchoof Angular issue I believe is angular/angular#7136
I tried one of the workaround and it didn't work well but I managed to do a hack which makes it works (to be honest) I'm not very proud of it
blog post here
@patmill also in this blog I explained how to bootstrap multiple instances of the same webpart. It's not a good solution for a non-simple webparts as i don't really know how it will behave for complex scenarios with multiple providers again I'm not an angular2 expert I'm still learning this new shiny thingy

[maliksahil]

It is possible to use Angular 2 with SPFx elegantly. You just have to create component IDs dynamically. You can see more at https://winsmarts.com/using-sharepoint-framework-spfx-with-angular-2-ae71f66c5dfa#.ryd3b77tl

[s-KaiNet]

From my POV, angular 2 sample here - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype is far far away from something "elegant" and easy to use. For me it more like a workaround, not a real solution.

To use it, I need to know

• how ng2 internally renders components
• what is reflect-metadata
• also I need to use some "private" ng2 properties like in BaseAngular2WebPart.ts - this._component = this._app['_rootComponents'][0].instance;
• also I need to use "trick" with additional anonymous scope for components isolation

Of course you can use it without deep understanding of all internals, but you will have problems trying to fix some mystic bugs or unexpected behavior later down the road (when building something complex). Another questions that come to my mind regarding this approach are questions about performance and memory. That's not a "standard" way of using ng2, so how it affects performance and memory?

For me It doesn't look like something easy, understandable and straightforward. Current "solution" works in simple scenario, but I'm pretty sure you will face with many issues when building something more-less big and mature.

Consider how it's easy to bootstrap your SPFx web part in other frameworks:

knockout.js:

ko.applyBindings(viewModel, document.getElementById('my unique app-id'));

angular 1.x:

angular.bootstrap(document.getElementById('my unique app-id'), ['my-app-module']);

vue.js:

new Vue({
  el: document.getElementById('my unique app-id'),
  data: {
  }
})

I expect something similar from ng2, but currently it's still no easy way.

[octogonz]

@nickpape-msft @iclanton

[patmill]

So in all honesty, Angular 2 is not really great for webparts at this time. You can do it, but there are a collection of issues. Progress is being made in this area, but I would say it is still in the experimental phase.

[patmill]

This isn't really an issue in spfx per se. Angular 2 is not a great solution for SPFX. We'll continue to work with the angular folks and when a solution appears, we'll document and support it.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues