Raymond Raymond

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

event 2017-05-20 visibility 9,814 comment 10 insights toc
more_vert
insights Stats

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

1) Install Angular CLI 

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

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

2) 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.

4) Open the website in IE11

image

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’

image

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:

image

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.

image

More from Kontext
comment Comments
hide_source Anonymous #109 access_time 7 years ago more_vert

Merci !!!

hide_source Anonymous #111 access_time 7 years ago more_vert

works

hide_source Anonymous #110 access_time 7 years ago more_vert

Works!

hide_source Anonymous #178 access_time 7 years ago more_vert

@John

I’m glad it can help. 

format_quote

person John access_time 7 years ago

Thanks for taking time to post this! That saved a lot of time!

hide_source Anonymous #113 access_time 7 years ago more_vert

Thanks for taking time to post this! That saved a lot of time!

hide_source Anonymous #177 access_time 7 years ago more_vert

@Brian Daves You are welcome. It is probably because Edge has no such issue and eventually it will replace IE.

format_quote

person Brian Daves access_time 7 years ago

Thanks for the help. That was a very annoying issue and I'm surprised it hasn't been fixed by the Core team.

hide_source Anonymous #112 access_time 7 years ago more_vert

Thanks for the help. That was a very annoying issue and I'm surprised it hasn't been fixed by the Core team.

hide_source Anonymous #108 access_time 7 years ago more_vert
This solution works great for me on SPA Templates. The new templates with vs2017 15.3 core 2.0 the file is now named boot.browser.ts
hide_source Anonymous #107 access_time 7 years ago more_vert
Thank you so much for the info.
hide_source Anonymous #106 access_time 7 years ago more_vert
Thanks buddy!

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts