Angular 我如何避免使用“a”；意外模块'；HttpClientModule'。。。注释；错误？

我正在使用Angular 7并尝试从Rails 5应用程序读取JSON数据。我的src/app/app.component.ts文件中有以下内容

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  books;

  constructor(private http: HttpClient) {
    http.get('http://localhost:3000/books.json')
      .subscribe(res => this.books = res);
  }
}

这在我的./src/app/app.module.ts文件中

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


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    HttpClientModule,
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然而，当我在访问我的网页时，我得到了这个错误

compiler.js:486 Uncaught Error: Unexpected module 'HttpClientModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (compiler.js:486)
    at eval (compiler.js:15296)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15278)
    at JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler._compileModuleAndComponents (compiler.js:34374)
    at JitCompiler.compileModuleAsync (compiler.js:34268)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5578)
    at eval (main.ts:11)

compiler.js:486未捕获错误：模块“AppModule”声明了意外的模块“HttpClientModule”。请添加@Pipe/@Directive/@组件注释。
在syntaxError（compiler.js:486）
评估时（compiler.js:15296）
在Array.forEach（）处
位于CompileMetadataResolver.getNgModuleMetadata（compiler.js:15278）
在JitCompiler.\u loadModules（compiler.js:34413）
在JitCompiler.\u compileemoduleandcomponents（compiler.js:34374）
在JitCompiler.compileModuleAsync（compiler.js:34268）
在CompilerImpl.compileModuleAsync（平台浏览器dynamic.js:239）
在PlatformRef.bootstrapModule（core.js:5578）
评估时（主要技术规范：11）

---

我遗漏了什么？

您需要在

导入下有
HttpClientModule
，而不是在
声明下

@NgModule({
  declarations: [    
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

可能重复的