Polyfills.ts in my Angular 2 ASP.NET Core application created using VS template, are they missing?

Question

I'm newbie in Angular development and I'm using Visual Studio 2017 Professional template to start creating an Angular 2 application with ASP.Net Core:

My problem is that the app doesn't run on Internet Explorer 11 and searching I have found that I have to uncomment something on polyfills file.

I have found it on D:\MyProjects\NetCore\AngularWebApplication\AngularWebApplication\node_modules\graceful-fs\polyfills.js but it doesn't have the same content that expected (like the ones show in this SO answer).

Is it a good idea to use VS template or maybe I can use the Empty template and add the Angular app to it?

Answer 1

I came across this same problem - and fortunately the fix is dead simple.

Put your polyfills.ts file in the same directory as the boot.browser.ts file (I ran an ng new test-app command in a temp directory just to get the latest files), than add the following line at the top of the boot.browser.ts file:-

import './polyfills';

You'll then have to remove the commented out bits in polyfills.ts file to include the required imports for the browsers you want to support, and also run and npm install commands that are required (as specified in the comments on the lines in polyfills.ts).

That should fix the IE11 problem for you.

You mentioned using an Empty template then creating an app using ng new, but it's not a trivial task getting it (and debugging) working in Visual Studio, so you're probably better off using VS Code if you're going down that route. If you can deploy to an environment that supports .net core and node.js, then you're probably better off using the .net core Angular template.

Answer 2

if you do not have polyfills.ts file read this

You have to open ClientApp-->boot.browser.ts file.

Under line 2

import 'zone.js';

Add this

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

/***********added*************/

And this should work