By using this site, you acknowledge that you have read and understand our Cookie policy, Privacy policy and Terms .
close

About Xml Xhtml Xslt Dhtml Css Javascript

rss_feed Subscribe RSS

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 * This page is subject to Site terms.

info About author

More from Kontext

Machine Learning with .NET in Jupyter Notebooks

local_offer machine-learning local_offer jupyter-notebook local_offer C# local_offer dotnet core

visibility 159
thumb_up 0
access_time 2 months ago

In this article, I'm going to show you how to install Jupyter in Windows and then install .NET kernel for Jupyter notebooks. It also shows a machine learning example using ML.NET. The target audience are .NET developers who want to expand their skills in data engineering and science domain...

open_in_new View

local_offer .NET local_offer dotnet core local_offer spark local_offer parquet local_offer hive

visibility 1111
thumb_up 0
access_time 11 months ago

I’ve been following Mobius project for a while and have been waiting for this day. .NET for Apache Spark v0.1.0 was just published on 2019-04-25 on GitHub. It provides high performance APIs for programming Apache Spark applications with C# and F#. It is .NET Standard complaint and can run in Wind...

open_in_new View

local_offer asp.net core 2 local_offer asp.net core local_offer dotnetcore local_offer open-banking

visibility 194
thumb_up 0
access_time 12 months ago

I’ve just started an asp.net core 2.2 based implementation for Australia Consumer Data Standards (published by Data 61). Opening Banking initiative will follow these standards. The purpose is to help you to get familiar with these standards, especially the APIs that need to be implemented. ...

open_in_new View

local_offer angular local_offer lite-log

visibility 9634
thumb_up 0
access_time 2 years ago

Problem When you follow Angular CLI installation guide in Windows, you may encounter the following error: ng is not recognized as an internal or external command The resolutions are available in the following link: ...

open_in_new View

comment Comments (10)

comment Add comment

Please log in or register to comment. account_circle Log in person_add Register
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
Kontext Column

Kontext Column

Created for everyone to publish data, programming and cloud related articles. Follow three steps to create your columns.

Learn more arrow_forward
info Follow us on Twitter to get the latest article updates. Follow us