Implement IE polyfills to for IE9-11 (fixes apply on undefined error)

[AmrineA]

Added IE polyfills for IE9-11

• new ClientApp/polyfills/polyfills.ts file containing polyfills
• added core-js to package.json
• added core-js to webpack.config.vendor.js
• added polyfills.ts import to ClientApp/boot-client.ts

Submission containing materials of a third party:
Mark Pieszak (https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Client/polyfills/polyfills.ts)
MIT License

[EduardTheThird]

Handy, thanks!

[AdamDotNet]

I'm pretty new to Angular, but I think this pull request doesn't need the changes in webpack.config.vendor.js or package.json because Angular 4 already includes core-js as its own dependency. In my experience, IE 11 worked by adding the imports, but without modifying those two files.

In general, I think having a polyfills.ts file in the template is a good idea, one because it seems to have some polyfills that even "evergreen" browsers need, and two, it's easier to know how to "fix" IE not working if the file exists and has all the explanatory comments it typically does. Seems like the latest Angular CLI version of polyfills.ts has a few more entries than this pull is suggesting:
https://github.com/angular/angular-cli/blob/d21caada668f2ff0255b0353b735d9966d17ee31/tests/e2e/assets/1.0.0-proj/src/polyfills.ts

This helped point me in the right direction, thanks!

[brycekmartin]

I had to add core-js to my package.json and the import to the boot.browser.ts. I then ran npm install --save and webpack --config webpack.config.vendor.js to update everything. When I didn't have the core-js reference in the package.json I was getting an error in the application. The polyfills basically couldn't find the methods they needed without it. Just my .02. Thank you for figuring this out... it was incredibly timely as I was fighting with this issue last week and actually have an Issue open in the new templating repository... Here

I am going to update that issue with a link to this PR.

[olivier-voutat]

This fix works, but I'm experimenting some problems. We have an application with two components. A list of companies and a submit form.

The submit works (if we ignore a little problem with a input field with a placeholder with accents... that makes the "field is required" to be shown immediately).

But the list is not updated each time we go there. The webapi is called only the first time the component is opened. In Firefox it works as before. The webapi is always called on component navigation.

Any idea?

ngOnInit(): void {
let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' });
let options = new RequestOptions({ headers: headers });
this.http.get('/api/firm/getlist', options).subscribe(response => {
this.firms = response.json();
});
}

[AmrineA]

@olivier-voutat Without seeing your project, it's hard to say why that might be happening. If it works when navigating to the page, I'm assuming in this instance you are not navigating to it when you see it not working?

[olivier-voutat]

Sorry, I was on vacation and could not answer.

I created a new project using Visual Studio template and put it in my github. I added the necessary information for polyfill and added a new component to add data to the weatherforecast list.

https://github.com/olivier-voutat/AngularDemo

Steps to see the bug described in Internet Explorer:

1. Launch the application in debug and go to fetch data (data is displayed as expected).
2. Go to fetch add component and click "Add Weather Forecast".
3. Go back to fetch data (in Internet Explorer you don't see the new item - unless you press F5, in Firefox or chrome you do).

[AmrineA]

@olivier-voutat We have something similar happening in a project that we're working on. If we find a resolution to it, I'll let you know what we do.

[AmrineA]

@olivier-voutat We've fixed this issue by using the ResponseCache attribute in the controller. You can set Location to None and NoStore to true and it will send the because response headers to keep IE from caching so it makes the call each time.

[olivier-voutat]

Could not believe the response was so obvious. Old bastard of caching. I thought it was some problem in Angular life-cycle in Internet Explorer. Was looking in the wrong direction.... The directive in our company is to use Internet Explorer 11 for now, so it would be a great problem for our project. Thank you very much @AmrineA

[SteveSandersonMS]

Thanks for contributing this. Since the Angular template has now moved to being Angular CLI-based, we no longer have code in this repo to determine what polyfills are placed there - we take the output from Angular CLI. As such this no longer applicable, but thanks very much for getting involved!