StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]：

Question

升级了我的NgxLogger模块后，我一直收到以下错误：

main.ts:17 NullInjectorError: StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]: 
  StaticInjectorError(Platform: core)[NGXLoggerHttpService -> HttpBackend]: 
    NullInjectorError: No provider for HttpBackend!

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { RecaptchaComponent } from 'ng-recaptcha';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;
}).catch(err => console.error(err));

RecaptchaComponent.prototype.ngOnDestroy = function () {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
};

core.module.ts

import { NgModule } from '@angular/core';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { StoreModule } from '@ngrx/store';
import { metaReducers, reducers } from './core.state';
import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from '../modules/auth/auth.effects';
import { CustomNGXLoggerService, LoggerModule, NGXLogger, NGXLoggerHttpService } from 'ngx-logger';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictActionImmutability: true,
        strictStateImmutability: true,
      },
    }),
    EffectsModule.forRoot([
      AuthEffects
    ]),
  ],
  providers: [
    NGXLogger,
    NGXLoggerHttpService,
    CustomNGXLoggerService
  ]
})

export class CoreModule {
}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AuthService } from './modules/auth/auth.service';
import { ReferralService } from './modules/referral/referral.service';
import { UserService } from './modules/shared/services/user.service';
import { UtilService } from './modules/shared/services/util.service';
import { CoreModule } from './core/core.module';
import { NavbarModule } from './modules/shared/components/navbar/navbar.module';
import { FooterModule } from './modules/shared/components/footer/footer.module';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { RouterModule, Routes } from '@angular/router';
import { LoggerModule } from 'ngx-logger';
import { environment } from '../environments/environment';

const routes: Routes = [
  { path: '', loadChildren: './modules/main/main.module#MainModule' },
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    NavbarModule,
    FooterModule,
    CoreModule,
    LoggerModule.forRoot(environment.logging),
    NgxUiLoaderModule
  ],
  providers: [
    AuthService,
    UtilService,
    UserService,
    ReferralService
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Answer 1

您有此错误，因为您的NGXLoggerHttpService依赖于HttpBackend类，但是HttpBackend类没有导入到module.ts中的providers部分。尝试将HttpBackend导入到提供程序。

Answer 2

正如在本期中提到的，导入HttpClientModule并将其添加到模块的导入中解决了这个问题。

import { HttpClientModule } from '@angular/common/http';
...
imports: [ ..., HttpClientModule, ...]