Angular 5中Http拦截器失效，报AppHttpInterceptor无提供者错误求助

让我帮你梳理下问题所在，你的代码里有两个关键问题导致了这个错误和拦截器失效：

问题1：没必要地手动注入了拦截器 #

你在RolesService的构造函数里直接注入了AppHttpInterceptor：

constructor(private http: Http, private ads: AppHttpInterceptor) { }

拦截器是Angular为HttpClient提供的管道机制，完全不需要你在服务里手动注入实例。Angular会通过HTTP_INTERCEPTORS令牌自动管理拦截器的生命周期，直接注入会导致Angular找不到该类的直接提供者（因为你只在HTTP_INTERCEPTORS下配置了它，没有把它作为独立的provider注册）。

问题2：使用了旧的Http模块，而非拦截器支持的HttpClient #

你的RolesService用的是@angular/http里的Http类，而Angular的拦截器只对@angular/common/http里的HttpClient生效。旧的Http模块不支持拦截器机制，所以即使你配置对了拦截器，也不会触发它的逻辑。

修复步骤 #

1. 修正RolesService代码 #

把旧的Http替换为HttpClient，并移除手动注入的拦截器：

import { Injectable } from '@angular/core';
// 替换为HttpClient而非旧的Http
import { HttpClient } from "@angular/common/http";
import { environment } from '../../environments/environment';

@Injectable()
export class RolesService {
 private apiUrl = environment.apiUrl
 // 只保留HttpClient注入
 constructor(private http: HttpClient) { }

 getRoles() {
  let url = this.apiUrl + '/api/v1/role/all';
  // 使用HttpClient的get方法，返回Observable
  return this.http.get(url);
 }
}

2. 确认AppModule中的拦截器配置 #

你的providers配置逻辑是对的，可以调整格式让它更清晰（避免嵌套数组的混淆）：

providers: [
  ScriptLoaderService, 
  SharedService,
  // 单独列出拦截器配置，结构更清晰
  { 
    provide: HTTP_INTERCEPTORS, 
    useClass: AppHttpInterceptor, 
    multi: true 
  }
],

这里multi: true是必须的，因为它允许同时注册多个拦截器，Angular会按注册顺序依次执行它们。

3. 验证拦截器逻辑 #

现在当你调用RolesService.getRoles()时，拦截器里的console.log('start')和alert应该会触发。如果还是有问题，可以检查ToastrService是否正确注册（你已经在AppModule里导入了ToastrModule.forRoot()，这部分是没问题的）。

额外注意点 #

• 确保所有需要发送HTTP请求的服务都切换到HttpClient，旧的Http模块在Angular 4.3+之后就被标记为弃用。
• 拦截器里的catchError返回of(err)会让数据流继续，但你可以根据业务需求调整，比如重新抛出错误：return throwError(() => err)（Angular 6+写法），或者返回一个默认值。

内容的提问来源于stack exchange，提问作者kishan