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;
}