This site uses cookies to deliver our services. By using this site, you acknowledge that you have read and understand our Cookie and Privacy policy. Your use of Kontext website is subject to this policy. Allow Cookies and Dismiss

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

7410 views 10 comments last modified about 2 years ago Raymond

dotnet core angular asp.net core 2

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

Related pages

Retrieve Identity username, email and other information in ASP.NET Core

3982 views   0 comments last modified about 2 years ago

The identity system in ASP.NET has evolved over time. If you are using ASP.NET Core, you probably found User property is an instance of ClaimsPrincipal in Controller or Razor views. Thus to retrieve the information, you need to utilize the claims.

View detail

Retrieve Azure AppSettings and Connection String Settings in ASP.NET Core Apps

2720 views   0 comments last modified about 2 years ago

In ASP.NET Core, we can easily use user secrets to manage our password or credentials. This post will summarize the approaches we can use after the websites are deployed into Azure.

View detail

Server.MapPath Equivalent in ASP.NET Core 2

7683 views   0 comments last modified about 2 years ago

In traditional asp.net applications, Server.MapPath is commonly used to generate absolute path in the web server. However, this has been removed from ASP.NET Core. So what is the equivalent way of doing it?

View detail

Migrating from ASP.NET Core 1.x to ASP.NET Core 2.0

1498 views   2 comments last modified about 2 years ago

Migrating from ASP.NET Core 1.x to 2.0 is not an easy job especially if you have customized Identity and used customized authentication. This post summarizes the issues and errors I have experienced and their resolutions when upgrading my project. Hopefully it can save you sometime if you are doi...

View detail

OpenIddict Refresh Token Flow issue ASP.NET Core 2.0

1595 views   0 comments last modified about 2 years ago

Context When I followed OpenIDDict refresh flow sample, I constantly got the issue “The refresh token is no longer valid”, which is returned by the following code in my authorization web api controller: result.Content = new OpenIdConnectResponse  &...

View detail

Migrating from ASP.NET Core 1.x to ASP.NET Core 2.0 – Issues Continued

833 views   0 comments last modified about 2 years ago

Other related issues are found during my migration. Unable to Change Identity Table Names ...

View detail

Add comment

Please login first to add comments.  Log in New user?  Register

Comments (10)

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

Lu*** about 10 months ago

Merci !!!

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

sh*** about 11 months ago

works

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

De*** about 12 months ago

Works!

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

Ra*** about 2 years ago

@John

I’m glad it can help. 

Jo*** about 2 years ago

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

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

Jo*** about 2 years ago

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

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

Ra*** about 2 years ago

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

Bri*** about 2 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.

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

Bri*** about 2 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.

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

Kevi*** about 2 years ago

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

Ja*** about 2 years ago

Thank you so much for the info.
J Re:Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

Jo*** about 2 years ago

Thanks buddy!

Contacts

  • enquiry[at]kontext.tech

Subscribe