Angular 6-IE11上的GET/POST问题-Symbol(rxSubscriber)未定义 [英] Angular 6 - problems with GET/POST on IE11 - Symbol(rxSubscriber) is undefined
问题描述
使用Angular 6在IE11上进行简单的GET/POST时，我遇到了一个奇怪的问题-符号(rxSubscriber)未定义.Angular 5上也发生了同样的问题.不幸的是，升级没有帮助.这段代码在Chrome和Firefox上运行良好，但在IE上却显示以下错误.更有趣的是，当ng在IE11上投放并运行时，同样的代码也能很好地工作.Angular在ASP .NET MVC视图中继承，如下所示.同样， polyfills也未添加注释，因为它可以在IE上正常工作.应用程序是.NET WebForms/.NET MVC/Angular组合.有任何解决方法的想法吗?
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
}
我的代码如下:
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;
}
推荐答案
好的，我发现了一个问题.正如我最初认为的那样，问题与.NET WebForms/.NET MVC/Angular组合无关.忘了我将apache.min.js放在Angular脚本之前，那才是问题的根源.当我在Angular脚本之后移动此脚本时，问题已经解决.我已经通过在IE11上的Angular中调试zone.js进行了跟踪，并得到了IE11控制台中发生2个相同错误的提示.看来speed.js与zone.js冲突，因为所有XHR(Angular将您的GET/POST请求重建为XHR)都失败了.不知道为什么它在Chrome或Firefox中无法正常工作，但是如果您在Angular脚本之前的任何地方都使用了speed.js，可以考虑将其移到它们之后，例如:
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>
这篇关于Angular 6-IE11上的GET/POST问题-Symbol(rxSubscriber)未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
