R3InjectorError 错误“没有 _HttpClient 的提供程序！”

Question

我收到此错误消息“错误错误 [NullInjectorError]：R3InjectorError（环境注入器）[_HttpClient -> _HttpClient]： NullInjectorError：没有 _HttpClient 的提供程序！”，同时尝试通过后端上传和保存 gif，并且我从应用程序的后端获得了一些设置。

这是我的app.module.ts

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { RootComponent } from './root.component'; // Import RootComponent
import { GifDetailComponent } from '../gif/gif-detail.component'; // Import GifDetailComponent
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { UploadComponent } from '../Upload/upload.component'; // Import UploadComponent
import { UploadModule } from '../Upload/upload.module'; // Import UploadModule

@NgModule({
  declarations: [
    RootComponent, // Declare RootComponent
    GifDetailComponent,
    
    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
    HttpClientModule,
    UploadModule,
  ],
  providers: [],
  bootstrap: [ RootComponent ] // Bootstrap RootComponent
  
})
export class AppModule { }

上传.module.ts

// upload.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // Import FormsModule
import { UploadComponent } from './upload.component';

@NgModule({
  declarations: [UploadComponent],
  imports: [
    CommonModule,
    
    FormsModule, // Use FormsModule instead of ReactiveFormsModule
  ],
  exports: [UploadComponent]
})
export class UploadModule { }

有什么想法我应该做什么吗？

有一个我的 github 链接：https://github.com/BekaEn/GifApp

Answer 1

您有一个单独的模块

UploadModule

，我猜它是延迟加载的，因此您需要单独导入

HttpClientModule

才能使其工作！

// upload.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // Import FormsModule
import { UploadComponent } from './upload.component';

@NgModule({
  declarations: [UploadComponent],
  imports: [
    CommonModule,
    HttpClientModule, // <--------- changed here!
    FormsModule, // Use FormsModule instead of ReactiveFormsModule
  ],
  exports: [UploadComponent]
})
export class UploadModule { }

如果您不想重复导入，请创建一个公共模块并导出内容，您可以在其中导入到所有延迟加载的模块，并且导入将被共享！

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule, 
    FormsModule, 
  ],
  exports: [
    CommonModule,
    HttpClientModule,
    FormsModule, 
  ]
})
export class SharedModule { }

您可以使用它将导出的功能导入到您想要的任何模块！

@NgModule({
  declarations: [UploadComponent],
  imports: [
    SharedModule, // <--------- changed here!
  ],
  exports: [UploadComponent]
})
export class UploadModule { }