Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

Issue Context

After installed Visual Studio 2017 15.3 preview and .net core 2.0 preview SDK, I upgraded one of my existing asp.net core project to 2.0. The project was created using ‘dotnet new angular’ SPA template. I also upgraded all the client app packages to the latest. For example, Angular is upgraded to 4.1.2 (configuration in package.json is: "@angular/core": "4.1.2".)

However after this upgrade, the website is throwing one JavaScript error:

return Object.assign.apply(Object,[{}].concat(t)

Unhandled exception at line 305, column 717 in http://localhost:\*\*\*\*\*\*/dist/vendor.js?v=\*\*\*\*\*\* 0x800a138f - JavaScript runtime error: Unable to get property 'apply' of undefined or null reference occurred

There seems to be several related issues logged previously but they all should be resolved previously:

However, I could not resolve my problems based on those information. This issue doesn’t occur when using Chrome. To reproduce the issue and also to find out whether the issue is related to Angular or the SPA template I am using, I decided to use Angular CLI to test.

Reproduce using Angular CLI

Install Angular CLI

npm install --save-dev @angular/cli@latest

More information, please refer to https://cli.angular.io/.

Create new project:

ng new test-angular-cli

3)Start the website service

ng serve

The output will be similar to the following:

$ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 ** Hash: 54ecffde2bf081693077 Time: 8318ms chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered] chunk {1} main.bundle.js, main.bundle.js.map (main) 3.7 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered] webpack: Compiled successfully.

Open the website in IE11

https://api.kontext.tech/resource/0e0d1ce5-d1bf-5fa3-ad2e-16ac0f4a09ce

The same issue occurred. This proved that the issue is related to Angular.

Resolve the Issue in Angular Project

By reading the documentation https://angular.io/docs/ts/latest/guide/browser-support.html, I understand this is something related to Polyfills. To be more specific, IE11 doesn't implement 'apply' function; thus we need to ensure the polyfills are loaded before Angular.

For the Angular CLI created project, there is one file named ‘polyfills.ts’ under src folder. The file is configured in ‘.angular-cli.json’

https://api.kontext.tech/resource/1e87b2cb-937b-566a-9d91-b9346906a089

Open this file, you will find that these polyfills for IE11 are commented out:

/*************************************************************************************************** * BROWSER POLYFILLS */

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

Therefore, we just need to uncomment these imports. In this file, es6 is used, which is one of the suggested polyfills by Angular. After this is done, the issue disappeared:

https://api.kontext.tech/resource/5ac9e002-7ee9-5996-85a8-81aee6245b2f

Resolve the Issue in ASP.NET Core SPA Template

The file ‘polyfills.ts’ doesn't exist by default; thus we need to manually add it.

Approach 1

Add the following code into ‘boot-client.ts’ in ClientApp folder in your ASP.NET core project.

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

Approach 2

Copy the Angular CLI generated file polyfills.ts (with es6 imports uncomments) into the ClientApp folder in your solution. Import this file into boot-client.ts.

https://api.kontext.tech/resource/defc7e4d-5c10-5ae6-a39e-4c769dcddd16