CODEWITHSUNDEEP
angularservicecomponents
lekshmi
lekshmi

Reputation: 348

How to solve issue in loading Angular app, after service is injected to the component?

This is my sample code . Here after i injected OrderDetailService to the constructor of home.component.ts my app is not loading and browser is hanging by throwing this error : I have gone through different solutions from stack itself but my issue is not solved yet . Can anyone please help.

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

}

order-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 { }

Thank You

Upvotes: 0

Views: 1578

Answers (2)

KShewengger
KShewengger

Reputation: 8269

You need to remove the OrderDetailService on your AppModule and HomeComponent.

This is because you have specified in your Injectable to be @Injectable({ providedIn: 'root' }) which this is by default be loaded on the root of your app.

Service

As per the Angular Dependency Injection Documentation

Below, will declare that this service should be created by the root application injector.

Angular creates injectors for you as it executes the app, starting with the root injector that it creates during the bootstrap process.

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

You should update yours to just be

Component

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

Upvotes: 2

Danny Schneider
Danny Schneider

Reputation: 311

I'm a little bit struggling with your component decorator in your home.component.ts:

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

In my project's I do not declare providers inside component's decorator. I would remove the line for provider's there.

2nd thing: As I can see you use http, so you may need to import any services inside your app.module.ts, like HttpClientModule (this is what I need to import, to get use of http service in Angular10).

Upvotes: 1

Related Questions