New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 2 : Documentation #7

Closed
rolandoldengarm opened this Issue Aug 17, 2016 · 25 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@patmill

patmill Aug 18, 2016

Contributor

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

Contributor

patmill commented Aug 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Aug 18, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@jmmartinez84

jmmartinez84 Aug 18, 2016

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.

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 comment has been minimized.

Show comment
Hide comment
@waldekmastykarz

waldekmastykarz Aug 18, 2016

Member

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

Member

waldekmastykarz commented Aug 18, 2016

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

@patmill patmill added the area:docs label Aug 18, 2016

@patmill

This comment has been minimized.

Show comment
Hide comment
@patmill

patmill Aug 18, 2016

Contributor

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.

Contributor

patmill commented Aug 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ericgrover

ericgrover Aug 24, 2016

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

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

@ministainer

This comment has been minimized.

Show comment
Hide comment
@ministainer

ministainer Aug 31, 2016

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)

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

This comment has been minimized.

Show comment
Hide comment
@ericgrover

ericgrover Aug 31, 2016

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

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

This comment has been minimized.

Show comment
Hide comment

That's awesome! @ministainer

@patmill

This comment has been minimized.

Show comment
Hide comment
@patmill

patmill Aug 31, 2016

Contributor

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

Contributor

patmill commented Aug 31, 2016

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

@ministainer

This comment has been minimized.

Show comment
Hide comment
@ministainer

ministainer Sep 1, 2016

@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

@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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Sep 8, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Nov 27, 2016

Is there any update on this?

Is there any update on this?

@plakhlani

This comment has been minimized.

Show comment
Hide comment
@plakhlani

plakhlani Jan 11, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@andrewconnell

andrewconnell Jan 11, 2017

Collaborator

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.

Collaborator

andrewconnell commented Jan 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@StefanSchoof

StefanSchoof Jan 11, 2017

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

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

@rolandoldengarm

This comment has been minimized.

Show comment
Hide comment
@rolandoldengarm

rolandoldengarm Jan 11, 2017

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 :)

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

This comment has been minimized.

Show comment
Hide comment
@andrewconnell

andrewconnell Jan 11, 2017

Collaborator

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

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

Collaborator

andrewconnell commented Jan 11, 2017

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

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

@andrewconnell

This comment has been minimized.

Show comment
Hide comment
@andrewconnell

andrewconnell Jan 11, 2017

Collaborator

@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

Collaborator

andrewconnell commented Jan 11, 2017

@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

@ministainer

This comment has been minimized.

Show comment
Hide comment
@ministainer

ministainer Feb 10, 2017

@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

ministainer commented Feb 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@maliksahil

maliksahil Feb 21, 2017

Contributor

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

Contributor

maliksahil commented Feb 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@s-KaiNet

s-KaiNet Feb 22, 2017

Contributor

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.

Contributor

s-KaiNet commented Feb 22, 2017

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.

@pgonzal

This comment has been minimized.

Show comment
Hide comment
@patmill

This comment has been minimized.

Show comment
Hide comment
@patmill

patmill Feb 23, 2017

Contributor

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.

Contributor

patmill commented Feb 23, 2017

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 comment has been minimized.

Show comment
Hide comment
@patmill

patmill Oct 24, 2017

Contributor

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.

Contributor

patmill commented Oct 24, 2017

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.

@patmill patmill closed this Oct 24, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment