在模块 class 中编译 angular 项目时出错

Error while compiling angular project in module class

我的app.module.tsclass是:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { LoginComponent } from './login/login.component';
import { EroorComponent } from './eroor/eroor.component';
import { ListTodosComponent } from './list-todos/list-todos.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';
import { LogoutComponent } from './logout/logout.component';
import { TodoComponent } from './todo/todo.component';
import { HttpIntercepterBasicAuthService } from './service/http/http-intercepter-basic-auth.service';



@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    LoginComponent,
    EroorComponent,
    ListTodosComponent,
    MenuComponent,
    FooterComponent,
    LogoutComponent,
    TodoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    {provider: HTTP_INTERCEPTORS,
      useClass:HttpIntercepterBasicAuthService,
      multi:true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 HttpIntercepterBasicAuthService class 正在实现 HttpInterceptor 是:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpIntercepterBasicAuthService implements HttpInterceptor{

  constructor() { }

  intercept(request: HttpRequest<any>,next:HttpHandler): Observable<HttpEvent<any>>{
    let username='ashwin'
    let password='karki'

    let basicAuthHeaderString='Basic '+ window.btoa(username+ ':' +password);

    request=request.clone({
      setHeaders:{
        Authorization: basicAuthHeaderString
      }
    })

    return next.handle(request);
  }
}

但是当我尝试在 app.module.ts class 中使用提供程序时使用:

providers: [
    {provider: HTTP_INTERCEPTORS,
      useClass:HttpIntercepterBasicAuthService,
      multi:true}
           ]

我得到的错误是:

我调查了很多 angular 项目,发现当我尝试使用提供程序时 used.But 是相同的过程,但我遇到了错误。

你这里有误,

providers: [{provider: HTTP_INTERCEPTORS
             ^^^^^^^

应该只是provide.

您在 provider 中犯了错误,但它是 provide 您可以尝试这些

    providers: [
        {provide: HTTP_INTERCEPTORS, useClass:HttpIntercepterBasicAuthService,multi:true}
    ]