IE11 Error

[Ravell7]

Hi,

I just cloned and tried your solution on a VM running Windows 7.

When I do ng serve, everything works on Chrome and Firefox. But I have an error on IE11 (11.0.9600.17041).

When I add the Web Part in the page, I have the following message :

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.RequirementsFormWebPart.ce750733-0834-4dae-b18f-4ad0992a4af5,Error: Out of stack space script resources due to: {1}.

I know the problem comes from SPFx with Angular. Angular alone or SPFx alone works well.
I think there is a problem with the polyfills but I can't confirm.

Any idea ?

Thanks.

[BenGWeeks]

Try running gulp clean before running gulp serve again (we use gulp serve rather than ng serve for SPFx webparts).

[Ravell7]

Thank you for the feedback.

Already done without success.

I have found this post :
angular/zone.js#618

I don't know if it's related to my problem, but nothing changed with the fixed version of zone.js.

Still digging...

[BenGWeeks]

Ah, good find. I have seen the:

Error.Create is not a function

But it didn't seem to affect the functionality (I mainly test in Chrome though).

[BenGWeeks]

@Ravell7 Did you get this resolved?

[Ravell7]

Unfortunately not.

I have made a lot of tests with your sample and with the official SharePoint sample (Add different polyfills, different versions of zone.js, downgrade to Angular 2.1...) with no success.

Finally, we have decided to go with AngularJS. Not the best option but it works with IE11 (And also with IE10).

[GaryWenneker]

LOL, looks like we're having the same issue and running around in circles. Either you get a 'Zone already loaded' or you get an Out of Stack exception. Funny tho' that in my project it works smoothly in Chrome.
Am curious if you get it resolved.

what I learned is that SPFX also has a zone function and therefore the function fails. Found a howto stating one should uncomment the catsing of the exception but even then it fails. Upgrading to Angular 4.0.1 gets you in other problems

[BenGWeeks]

Hi Gary, yes, similar issue with upgrading to 4, soon downgraded again. I have tried various polyfill.js alternatives but no joy yet. I have someone else working on it too who may comment on here.

[BenGWeeks]

From memory you could try changing the "use strict" to whatever the equivalent of "do not use strict" is as that may stop the overflow issue. Perhaps also caused by order of loading issue (only seen in IE) and putting in a setTimeout on the initial bootstrap might help? (Would try myself but on holiday at the moment)

Also recall that I saw this error loaded twice on the page, and I don't think I had accidentally loaded the web part in twice, so for some reason IE is loading it twice, so error caused as we know you can only have an Angular 2 webpart once on a page?

[GaryWenneker]

I stripped my project until the loading of the following:

import 'zone.js';
import 'reflect-metadata';
import 'es6-shim';

the es6-shim can be removed, and then still works in Chrome. But doing anything else will result in different behaviour in IE. A colleague of mine told me the exact errors occur in Edge.

[BenGWeeks]

Issue could then be it's calling the wrong Zone method?

[GaryWenneker]

Absolutely, SPFX also has a function called Zone. But if you look in 'node_modules/zone.js/dist/zone.js' probably line 23 you'll see it tries to load zone.js.
(my guess is that the functionality of the both zone functions are different)

edit: I also found another 'hack' where one would add a script tag setting Zone to undefined prior to loading the angular zone.js but others commented that this would affect the SharePoint ribbon.

[GaryWenneker]

When having more time I'll check the latest Angular2 sample from the spfx branch as they load the webpart with a specific id. Not sore it is a hack or workaround.

[GaryWenneker]

With the latest angular2-prototype I can have multiple webparts on a page and their behaviour is working great, ofcourse only in Chrome ;-)

[BenGWeeks]

Anybody tried defining the angular 2 dependencies as externals? That way Zone will not be a local variable presumably (as well as improve build/bundle speed).

[GaryWenneker]

how would that be accomplished as during compile we need the ref to Angular?

EDIT: This morning I loaded up my Win 10 vbox image from my mac. I cloned the spfx repos and did an npm i on the angular2 sample. Gues what! It works in IE.
Looks like they did some work on SPO or IE11 sucks anyway and Angular2 by default doesn't love IE11 that much :) I say, drop all older browser versions ;)

[BenGWeeks]

Ah, interesting @GaryWenneker. I shall take a look at that when I get a chance too.

With regards to using externals, this is done in config > config.json (see "externals" section). For example:

  "externals": {
    "sp-pnp-js": "https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/2.0.0/pnp.min.js"
  },

I have also spoken with @andrewconnell who was very helpful and the liaison point between SPFx and Google it would seem. Sounds like he is trying to meet with them to understand exactly where the propblem lies, but in any case, a fair bit of work required from Google which they aren't jumping at doing. For this reason, he is current recommending using the previous version of ng.

[GaryWenneker]

Yes everyone is saying that we need to use AngularJS and not Angular because Angular cannot bootstrap just a piece in the DOM. Instead it wants to scope the entire page. The SPFX angular 2 prototype is a hack but not the right way to work with it. My project Nitro just targets the REST and JSOM API and actually uses the SPFX webpart to have a working environment :)

[andrewconnell]

@webtechy & @GaryWenneker - that's correct... I do not recommend using Angular (ng2/ng4) with SPFx. I won't go so far as to say that's my official guidance, but that's my current thinking. As @webtechy said, I'm working with Google to finalize that... I have a blog post written with my guidance, but want to make sure I'm not missing something and have the Google stance before publishing it. From my POV, I don't see this as an SPFx / Microsoft issue... it's strictly a characteristic of Angular... frankly disappointing as (IMHO) I'd much rather use Angular over React.

[GaryWenneker]

LOL and yes I also prefer Angular over React as Angular is a framework with al lot of options as React isn’t out of the box ☺ I am aware that the bootstrapping issue is still there but for now it is just hosting my stuff which is targeting some other logic

[andrewconnell]

FWIW, if you really want to use Angular (ng2 / ng4), you still can, just not with SPFx. When you own the whole page it’s not an issue. Therefore add-ins (because they are manifested within IFRAMES) & sandboxed solutions are still a viable option. Hopefully we’ll see support for add-ins in modern pages as well as full page apps with SPFx get added in the future. That will ease some of the pain…

[GaryWenneker]

Will Angular be changed to fit the needs of being a part of a page instead of the requirement it wants the whole page? Or isn't that sure yet that it ever will happen?

[andrewconnell]

Remains to be seen... Angular is designed to be a full-blown web framework (ala: SPA framework), not just a few engine (like React). A case could be made that it doesn't make sense to have multiple versions of Angular on the page or multiple Angular components on the page.

I'm in frequent talks to the people who run Angular @ Google... the final story is not known at this time. As I've discussed with @webtechy in the past, I'm working to get the final answer so we can all plan going forward... I plan to post it on my blog once we know... stay tuned...

[ArcanDotNet]

The issue has nothing to do with Angular, honestly. Create a brand new SPFX Yo, add any ES6 Polyfill of your choice and it will fail with an 'Out of Stack Space' exception. This is why Angular works fine inside of SPFX in all but IE, because its only the polyfills that have issues.

Angular is not the only modern dev project that utilizes ES6 and requires a polyfill, and its a standard javascript practice to use these files. I have made a post specifically about this issue at SP Dev Docs:

SharePoint/sp-dev-docs#888

I've added an experimental workaround to my issue above that gets the Polyfills working for Angular2/4.

[eschrader]

I have some code that takes a SP List item column (a news article tagged to one or more choice categories) and want to show that to users who have a user profile property with one or more categories they subscribe to (csv). When I display my news, I only want to show items that match what the user subscribes to.

I can run this TS online but cannot in my new SPFX web part. It says (TS) property "diff" does not exist on type 'any[]'

`    Array.prototype.diff = function (arr2) {
      var ret = [];
      for (var i in this) {
        if (arr2.indexOf(this[i]) > -1) {
          ret.push(this[i]);
        }
      }
      return ret;
    };
    var array1 = ["Panda", "Zebra", "Lion", "Cat", "Dog", "Fish", "whatever", "Bird"];
    var array2 = ["Panda", "Cat"];

    console.log(array1.diff(array2));
`

OOTB from Yoeman theres types es6-promise with es5 lib and targets.

How do I get diff to work? How can I see if es5 or es6 is "loaded" on my ts code page?

Thanks,

Eric Schrader

[BenGWeeks]

I believe the solution is to now use Angular Fragments, ref: http://www.andrewconnell.com/blog/using-angular-elements-in-sharepoint-framework-projects

[maliksahil]

FWIW - you will run into this issue on IE11 with Angular Elements also. The issue here is that SPFx has chosen to reinvent the wheel by implementing their own versions of ES6 polyfills. Angular elements + SPFx works fine in FFox/Chrome/Edge. But IE11, there is no solution really.

[SV-I]

Is this issue resolved? I am facing a similar problem with PnP angular elements project