Asp.net 角度6-IE11上的GET/POST问题-符号(rxSubscriber)未定义
我在IE11上使用Angular 6时遇到了一个奇怪的问题-符号(rxSubscriber)未定义。同样的问题发生在Angular 5上。不幸的是,升级没有帮助。 这段代码在Chrome和Firefox上运行良好,但在IE上我得到了如下错误。更有趣的是,当ng服务并运行在IE11上时,同样的代码也能很好地工作。Angular在ASP.NETMVC视图中继承,如下所示。另外,polyfill是未注释的,在IE上应该是这样的。应用程序是combo.NET WebForms/.NET MVC/Angular。有没有办法解决这个问题Asp.net 角度6-IE11上的GET/POST问题-符号(rxSubscriber)未定义,asp.net,asp.net-mvc,angular,internet-explorer,polyfills,Asp.net,Asp.net Mvc,Angular,Internet Explorer,Polyfills,我在IE11上使用Angular 6时遇到了一个奇怪的问题-符号(rxSubscriber)未定义。同样的问题发生在Angular 5上。不幸的是,升级没有帮助。 这段代码在Chrome和Firefox上运行良好,但在IE上我得到了如下错误。更有趣的是,当ng服务并运行在IE11上时,同样的代码也能很好地工作。Angular在ASP.NETMVC视图中继承,如下所示。另外,polyfill是未注释的,在IE上应该是这样的。应用程序是combo.NET WebForms/.NET MVC/Angu
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 {
}
@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>
ID: {{ User.id }}<br />
name: {{ User.name }}<br />
username: {{ User.username }}
应用程序组件.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 { }
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;
}
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;
}
app.component.html
@{
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 {
}
@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>
ID: {{ User.id }}<br />
name: {{ User.name }}<br />
username: {{ User.username }}
ID:{{User.ID}}
名称:{{User.name}}
用户名:{{User.username}
测试服务.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 { }
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;
}
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;
}
从'@angular/core'导入{Injectable};
从'@angular/common/http'导入{HttpClient};
从“rxjs”导入{Observable};
@注射的({
providedIn:'根'
})
导出类测试服务{
构造函数(私有http:HttpClient){}
GetUser():可观察{
返回此.http.get('https://jsonplaceholder.typicode.com/users/1)。管道();
}
}
导出类用户{
id:编号;
名称:字符串;
用户名:字符串;
电子邮件:字符串;
地址:地址;
电话:字符串;
网站:string,;
公司:公司,;
}
导出类地址{
街道:字符串;
组曲:弦乐;
城市:字符串;
zipcode:字符串;
geo:geo;
}
出口级Geo{
lat:字符串;
液化天然气:管柱;
}
出口类公司{
名称:字符串;
流行语:弦乐;
bs:字符串;
}
好的,我发现了一个问题。这个问题和我最初认为的.NETWebForms/.NETMVC/Angular组合无关。忘记了我将pace.min.js放在Angular脚本之前,这是问题的根源。当我在问题解决后移动这个脚本时。我通过在IE11上调试zone.js来跟踪它,并得到了IE11控制台中出现2个相同错误的提示。看起来pace.js与zone.js冲突,因为所有XHR(对XHR的GET/POST请求)都失败了。不知道为什么它在Chrome或Firefox中能正常工作,但是如果你在PACE.JS的任何地方使用你的角脚本考虑在他们后面移动它,像这样:
<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>
在最后一个小时里,我在Symbol(rxSubscriber)上猛击了我的头,然后我来到这里,几乎看到了我的整个设置,并且遇到了相同的问题。@DamonDrake很高兴我能提供帮助:)Angular 7也出现了这个问题。下面的答案修正了它,就像它修正角6一样。