Angular 6 - проблемы с GET / POST в IE11 - символ (rxSubscriber) не определен

У меня странная проблема с простым GET / POST, работающим в IE11 с Angular 6 - Symbol (rxSubscriber) не определен. Та же проблема возникла на Angular 5. К сожалению, обновление не помогло. Этот код хорошо работает в Chrome и Firefox, но в IE я получил ошибку, показанную ниже. Что еще интереснее, тот же код также хорошо работает, когда ng обслуживает и запускает IE11. Angular наследуется в представлении ASP .NET MVC, как показано ниже. Также полифиллы раскомментированы, как и должно быть для работы в IE. Приложение представляет собой комбинированный .NET WebForms / .NET MVC / Angular. Есть идеи, как это исправить?

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

person Ashiv3r    schedule 27.08.2018    source источник
comment
Эта проблема также возникает с Angular 7. Ответ ниже исправил это, как и для Angular 6.   -  person Damon Drake    schedule 28.10.2018


Ответы (1)


Хорошо, я обнаружил проблему. Проблема не была связана с комбо .NET WebForms / .NET MVC / Angular, как я думал изначально. Забыл, что я поместил pace.min.js перед скриптами Angular, и это было источником проблем. Когда я переместил этот скрипт после того, как проблема с Angular исчезла. Я отследил это, отладив zone.js внутри Angular в IE11, и получил подсказку о двух одинаковых ошибках, возникающих в консоли IE11. Похоже, что pace.js конфликтует с zone.js, потому что все XHR (Angular перестраивает ваш запрос GET / POST в XHR) не работают. Не знаю, почему он работает правильно в Chrome или Firefox, но если вы используете pace.js где-нибудь до ваших сценариев Angular, подумайте о том, чтобы переместить его после них, например:

<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>
person Ashiv3r    schedule 28.08.2018
comment
Я только что за последний час разбил себе голову на Symbol (rxSubscriber), затем я пришел сюда и увидел почти всю свою настройку и столкнулся с той же проблемой. - person Damon Drake; 25.10.2018
comment
@DamonDrake рад, что смог помочь :) - person Ashiv3r; 25.10.2018