3

I'm using Angular 5 with SharePoint SPFX Framework. Everything works great with multiple webparts on the page no problem but how do I include the Polyfills? I tried included in js files in the externals, doesn't work, I tried just importing all from the polyfills.ts into the webpart.ts file, no luck.

Can anyone help to explain how to get angular 5 and spfx render in IE, no problems with chrome but the webparts don't show in IE.

I've tried adding these scripts to externals but not working:

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
Fab
  • 904
  • 2
  • 14
  • 38
  • 1
    Have you found a solution yet? – Kirschi May 02 '18 at 07:32
  • 1
    No, I gave up on using it with SPFX. It works great as a single page app with everything in a document library but not with SPFX, least I haven't got it to work with IE. The other issue is zones doesn't work so code ends up having to be modified to have ChangeDetectorRef.detectChanges() all over the place so to take a component and having to modify it you end up with two the same components one with manual change detection so not using it. What does work is React, it works great so I'm using React for SPFX and Angular for full page apps. – Fab May 03 '18 at 12:26
  • 1
    Angular Elements may work but evidently need to wait till Angular 7 which Angular 6 is already a month behind so I don't see if being a viable solution until next year so I wouldn't recommend using it. I spent weeks on Angular and built the same web part with React in a few hrs and learned React as I went so was super simple – Fab May 03 '18 at 12:29
  • Thanks for the update – Kirschi May 03 '18 at 17:36
  • Can you show the example of Angular5 + SPFX on git please! – Ruslan Korkin Jun 05 '18 at 12:37
  • It doesn't work right unless you turn off zones and handle change detection manually which isn't worth the effort and defeats the purpose of using a framework. React works great and there are a lot of tutorials on it and I'm currently looking into StencilJs which looks very promising for sharepoint. – Fab Jun 05 '18 at 13:03
  • Have you tried Angular 6 with SPFX? – Ruslan Korkin Jun 05 '18 at 13:46
  • no because elements isn't going to be ready till Angular 7, currently elements only works in angular. It was too easy to use react in sharepoint to be honest and there are a lot of benefits to using react with spfx but for full page application with routing then Angular worked really good running inside a document library – Fab Jun 05 '18 at 13:52
  • Have you seen this video https://www.youtube.com/watch?v=CVsHW5uALMg ? Also Sebastien mentioned that wc-shim.js works as polyfill for old browsers (https://github.com/sebastienlevert/spfx-ng-webparts/blob/master/spfx-ng-hello-world/src/elements/wc-shim.js). So at least spfx + angular5 + ie11 works in demo video :) – Ruslan Korkin Jun 07 '18 at 13:02

1 Answers1

-2

To get Angular to work in IE, you have to uncomment some lines in src/polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
theriddle2
  • 398
  • 3
  • 9
  • 1
    Yeah that works great in an regular angular app using the CLI but I'm using the SPFX framework with webpack and not using Angualr CLI. I need to know how to get those classes to work the SharePoint SPFX frameowrk – Fab Apr 04 '18 at 13:56