Angular 在模块类中编译角度项目时出错

我的app.module.ts类是：

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

实现HttpInterceptor的HttpIntercepterBasicAuthService类是：

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);
  }
}

我得到的错误如下：

---

我查看了许多angular项目，发现使用了相同的过程。但当我尝试使用提供者时，我发现了错误。

您这里有一个错误

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

---

应该是

提供

您这里有个错误

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

---

它应该是

提供

您在

提供程序

中犯了错误，但它是一个

提供

，您可以尝试这些

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

---

您在

提供程序

中犯了错误，但这是一个

提供

您可以尝试这些

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