Angular 5 and Sharepoint SPFX

Question

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>

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

theriddle2 theriddle2 · Accepted Answer · 2018-04-04T13:38:34

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';

Angular 5 and Sharepoint SPFX

1 Answers