Блог

Это мой пример кода. Здесь после того, как я ввел OrderDetailService в конструктор home.component.ts, мое приложение не загружается, и браузер зависает, выдавая эту ошибку: я прошел через разные решения из самого стека, но моя проблема еще не решена. Кто-нибудь может помочь.

common.js:167 Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

home.component.ts

 import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OrderDetailService } from '../../services/order-detail.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [OrderDetailService]
})
export class HomeComponent implements OnInit {
  searchCriteria: any = {};
  orderDetailResultForView = [];
  destroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private orderDetails: OrderDetailService) { }

  ngOnInit(): void {
  }

}
  

заказ-detail.service.ts

 import { Injectable } from '@angular/core';
   import { map } from 'rxjs/operators';
   import { Http, Response, Headers } from '@angular/http';
   import { BaseUrlService } from './base-url.service';
   @Injectable({
    providedIn: 'root',
  })
  export class OrderDetailService {

  constructor(private http: Http, private basicUrl: BaseUrlService) { }
  }
  

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';

   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HomeComponent } from './components/home/home.component';
   import { BaseUrlService } from './services//base-url.service';
   import { OrderDetailService } from './services/order-detail.service';

   @NgModule({
    declarations: [
    AppComponent,
    HomeComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [OrderDetailService,BaseUrlService],
  bootstrap: [AppComponent]
  })
  export class AppModule { }
  

Спасибо

Вам нужно удалить OrderDetailService на вашем AppModule и HomeComponent .

Это связано с тем, что вы указали в своем Injectable to be @Injectable({ providedIn: 'root' }) , который по умолчанию будет загружен в корень вашего приложения.

Обслуживание

Согласно документации по внедрению зависимостей Angular

Ниже будет указано, что эта служба должна быть создана корневым инжектором приложения.

Angular создает для вас инжекторы при запуске приложения, начиная с корневого инжектора, который он создает в процессе начальной загрузки.

 @Injectable({
  providedIn: 'root',               
})
export class OrderDetailService { ...}
  

Вы должны обновить свой, чтобы просто быть

Компонент

 import { OrderDetailService } from '../../services/order-detail.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

   // You can use it directly
   constructor(private orderDetails: OrderDetailService) { }

}
  

AppModule

 @NgModule({
    ...,
    providers: [BaseUrlService],
    ...
})
export class AppModule { }
  

Я немного борюсь с вашим декоратором компонентов в вашем home.component.ts:

  @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css'],
      providers: [OrderDetailService] => I would remove this line
    })
  

В моем проекте я не объявляю поставщиков внутри декоратора компонента. Я бы удалил строку для провайдера там.

2-я вещь: как я вижу, вы используете http, поэтому вам может потребоваться импортировать любые сервисы внутри вашего app.module.ts, например HttpClientModule (это то, что мне нужно импортировать, чтобы использовать http-сервис в Angular10).