Angular 4中app.module.ts的Provider配置错误求助

我来帮你排查这个问题，这些红色波浪线本质上是因为缺少必要的导入语句，还有可能对自定义拦截器的引用存在问题，咱们一步步来解决：

1. 补充缺失的核心类导入 #

你已经导入了HttpModule，但Http、XHRBackend、RequestOptions这些具体类并没有在代码中显式导入，VS无法识别它们，所以会标红。

在你的导入区域添加这行代码：

import { Http, XHRBackend, RequestOptions } from '@angular/http';

2. 确认自定义HttpInterceptor的引用 #

HttpInterceptor是你自定义的请求拦截器类，VS标红说明它没有被正确导入到当前模块中。请确保你已经添加了对应的导入语句，替换成你实际的文件路径：

import { HttpInterceptor } from './your-interceptor-file-path'; // 比如 ./interceptors/http.interceptor

同时要确认你的HttpInterceptor类实现是正确的，构造函数参数要和useFactory中的依赖匹配，示例如下：

import { Http, XHRBackend, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';

export class HttpInterceptor extends Http {
  constructor(backend: XHRBackend, options: RequestOptions, private router: Router) {
    super(backend, options);
  }

  // 在这里重写需要拦截的请求方法，比如 get、post 等
}

3. 修正完整的AppModule代码 #

补上所有缺失的导入和必要的模块导出后，你的app.module.ts应该类似这样：

import { NgModule, ErrorHandler, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { AppComponent } from './app/app.component';
import { Observable } from 'rxjs/Observable';
import { TreeView } from './treeview/tree-view.directive';
import { TreeViewComponent } from './treeview/tree-view.component';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';
import { AppRouteModule } from './app/app.routing';
import { HttpInterceptor } from './your-interceptor-file-path'; // 替换为实际路径

@NgModule({
  imports: [BrowserModule, HttpModule, AppRouteModule],
  declarations: [AppComponent, TreeViewComponent, TreeView],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: Http,
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => 
        new HttpInterceptor(xhrBackend, requestOptions, router),
      deps: [XHRBackend, RequestOptions, Router]
    }
  ]
})
export class AppModule { } // 注意：你原代码漏掉了模块类的导出，这是Angular模块的必需部分

额外提示 #

虽然你使用的是Angular 4，但要了解从Angular 5开始，官方推荐使用HttpClientModule替代HttpModule，它的拦截器实现逻辑更简洁（基于HttpInterceptor接口和HttpClient），如果之后有版本升级计划，可以留意这个差异。

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