向组件注入服务后，如何解决加载 Angular 应用程序的问题？

Posted 2023-02-23

【中文标题】向组件注入服务后，如何解决加载 Angular 应用程序的问题？

【英文标题】：How to solve issue in loading Angular app, after service is injected to the component?

【发布时间】：2021-02-13 21:16:20

【问题描述】：

这是我的示例代码。在我将 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 
  

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  

谢谢

【参考方案1】：

我在你的 home.component.ts 中使用你的组件装饰器有点挣扎：

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

在我的项目中，我没有在组件的装饰器中声明提供者。我会删除那里提供者的行。

第二件事： 如我所见，您使用 http，因此您可能需要在 app.module.ts 中导入任何服务，例如 HttpClientModule（这是我需要导入的，以便在 Angular10 中使用 http 服务）。

【参考方案2】：

您需要删除AppModule 和HomeComponent 上的OrderDetailService。

这是因为您已在 Injectable 中指定为 @Injectable( providedIn: 'root' ) 默认加载到你的应用的根目录。

服务

根据Angular Dependency Injection Documentation

下面，将声明此服务应由 root 应用程序注入器创建。

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