By using this site, you acknowledge that you have read and understand our Cookie policy, Privacy policy and Terms .
visibility 8582 arrow_upward arrow_downward

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

info Last modified by Raymond at 2 years ago

Please log in or register to comment. account_circle Log in person_add Register
comment Comments (10)
account_circle Raymond

@John

I’m glad it can help. 


format_quote

person John access_time 3 years ago
Re: Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

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

reply Reply
account_circle John

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


reply Reply
account_circle Raymond

@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 3 years ago
Re: Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

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

reply Reply
account_circle Brian Daves

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


reply Reply
account_circle Kevin Hodgkins
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
reply Reply
account_circle Raymond

About Xml Xhtml Xslt Dhtml Css Javascript

open_in_new View