I've got strange problem with simple GET/POST working on IE11 with Angular 6 - Symbol(rxSubscriber) is undefined. Same problem occurred on Angular 5. Unfortunately upgrade didn't help. This code is working well on Chrome and Firefox, but on IE I got error showed below. What is more interesting same code working also well when ng serve and run on IE11. Angular is inherited in ASP .NET MVC view as shown below. Also polyfills are uncommented as it should be to work on IE. Application is combo .NET WebForms/.NET MVC/Angular. Any ideas how to fix it?
ERROR TypeError: Invalid calling object
"ERROR"
{
[functions]: ,
__proto__: {
[functions]: ,
__proto__: { },
message: "",
name: "TypeError",
Symbol(rxSubscriber)_g.85rjwpn14tf: undefined
},
description: "Invalid calling object",
message: "Invalid calling object",
name: "TypeError",
number: -2147418113,
stack: "TypeError: Invalid calling object
at scheduleTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:9279:13)
at ZoneDelegate.prototype.scheduleTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:6722:21)
at DELEGATE_ZS.onScheduleTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:6612:13)
at ZoneDelegate.prototype.scheduleTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:6716:17)
at Zone.prototype.scheduleTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:6547:17)
at Zone.prototype.scheduleMacroTask (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:6570:13)
at scheduleMacroTaskWithCurrentZone (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:7429:5)
at Anonymous function (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:9316:17)
at proto[name] (http://localhost:60646/Angular-Test/dist/Angular-Test/polyfills.js:7709:17",
Symbol(rxSubscriber)_g.85rjwpn14tf: undefined
}
My code looks like below:
Index.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
string virtualPathDirectory = !string.IsNullOrEmpty(System.Configuration.ConfigurationManager.AppSettings.Get("VirtualDirectoryPath")) ? System.Configuration.ConfigurationManager.AppSettings.Get("VirtualDirectoryPath") : string.Empty;
}
@section head {
<base href="@virtualPathDirectory/" />
}
<div>
<app-root></app-root>
</div>
@section scripts {
}
_Layout.cshtml
@using System.Text.RegularExpressions
@using System.Web.Optimization
@{
string virtualPathDirectory = !string.IsNullOrEmpty(System.Configuration.ConfigurationManager.AppSettings.Get("VirtualDirectoryPath")) ? System.Configuration.ConfigurationManager.AppSettings.Get("VirtualDirectoryPath") : string.Empty;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@RenderSection("head", required: false)
</head>
<body>
@RenderBody()
<script type="text/javascript" src="@virtualPathDirectory/bootstrap/js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/runtime.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/polyfills.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/main.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/vendor.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { TestService } from './test.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private TestService: TestService) { }
ngOnInit() {
this.TestService.GetUser().subscribe(user => this.User = user);
}
User: User = new User();
}
export class User {
id: number;
name: string;
username: string;
email: string;
address: Address;
phone: string;
website: string;
company: Company;
}
export class Address {
street: string;
suite: string;
city: string;
zipcode: string;
geo: Geo;
}
export class Geo {
lat: string;
lng: string;
}
export class Company {
name: string;
catchPhrase: string;
bs: string;
}
app.component.html
ID: {{ User.id }}<br />
name: {{ User.name }}<br />
username: {{ User.username }}
test.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class TestService {
constructor(private http: HttpClient) { }
GetUser(): Observable<User> {
return this.http.get<User>('https://jsonplaceholder.typicode.com/users/1').pipe();
}
}
export class User {
id: number;
name: string;
username: string;
email: string;
address: Address;
phone: string;
website: string;
company: Company;
}
export class Address {
street: string;
suite: string;
city: string;
zipcode: string;
geo: Geo;
}
export class Geo {
lat: string;
lng: string;
}
export class Company {
name: string;
catchPhrase: string;
bs: string;
}
Ok, I've found an issue. Problem wasn't connected with .NET WebForms/.NET MVC/Angular combo as I thought primarly. Forgot that I placed pace.min.js before Angular scripts and that was the source of problems. When I moved this script after Angular ones problem has gone. I've tracked it by debugging zone.js inside Angular on IE11 and got a hint of 2 same errors occurring in IE11 console. It looks like pace.js conflicts with zone.js, because all XHRs (Angular rebuild your GET/POST request to XHRs) are failing. Don't know why it's working correctly in Chrome or Firefox, but if you use pace.js anywhere before your Angular scripts consider moving it after them, like this:
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/runtime.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/polyfills.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/main.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/Angular-Test/dist/Angular-Test/vendor.js"></script>
<script type="text/javascript" src="@virtualPathDirectory/bootstrap/js/plugins/pace/pace.min.js"></script>