Angular 2: Please add a @Ngmodule Annotation

Question

I’m having an error asking to add the @Ngmodule annotation. But I believe this ok. follows error:

Uncaught Error: Unexpected value 'Http' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:466)
    at eval (compiler.js:15089)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15072)
    at JitCompiler._loadModules (compiler.js:33542)
    at JitCompiler._compileModuleAndComponents (compiler.js:33503)
    at JitCompiler.compileModuleAsync (compiler.js:33419)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.bootstrapModule (core.js:5446)
    at eval (main.ts:11)

I’ll send my classes below:

Host.

export class Host {
  static protocol = 'http';
  static host = 'localhost';
  static port = '8080';
  static domain = '/meu-dominio.com/rest';
  static webservice = Host.protocol + '://' + Host.host + ':' + Host.port + Host.domain;
}

Listarcomponent

import { Component, OnInit } from '@angular/core';
import {ListarService} from './listar.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-listar',
  templateUrl: './listar.component.html',
  styleUrls: ['./listar.component.css'],
  providers: [ ListarService ]
})
export class ListarComponent implements OnInit {

  public itens: any[];

  constructor(private _listarService: ListarService, private _router: Router) { }

  ngOnInit() {
    this._listarService.getAll().subscribe( (response) => {
      this.itens = response;
    });
  }

}

Listarservice

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import {Http} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Host} from '../host';

@Injectable()
export class ListarService {

  private itens: string[] = [];

  constructor(private _http: Http) {
  }

  getAll(): Observable<any[]> {
    return this._http.get( Host.webservice + '/home/listar').map( (response) => {
      return response.json();
    });
  }

  getOne(id: number): Observable<any> {
    return this._http.get(Host.webservice + '/home/listar/' + id).map( (response) => {
      return response.json();
    });
  }

  create(obj: any) {
    return this._http.post(Host.webservice + '/home/listar/', obj, {}).map( (response) => {
      return response.json();
    });
  }

  /*
   * O obj.id precisa ser referenciado de uma classe especifica
   *
   */
  update(obj: any) {
    return this._http.post(Host.webservice + '/home/listar/' + 'obj.id', obj, {}).map( (response) => {
      return response.json();
    });
  }

  delete(id: number) {
    return this._http.delete(Host.webservice + '/home/listar' + id);
  }
}

Man Appmodule

@NgModule({
  declarations: [
    AppComponent,
    ...
    ListarComponent
  ],
  imports: [
    BrowserModule,
    Http,
    FormsModule
  ],
  providers: [ ListarService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I wonder if I’m missing something...

Answer 1

In his AppModule you must import the module HttpModule of @angular/http or HttpClientModule of @angular/common/http.

Ai in your components and/or services Http of @angular/http or HttpClient of @angular/common/http.

Attention, there’s a big difference between HttpModule and HttpClientModule. The HttpClientModule is the new Angular HTTP API and is available from version ~4.3. Its API is stable now at Angular 5 or in the latest releases of Angular 4, after all Angular 4 was defined as LTS (Long Term Support).

If your project uses a lower version than these, use the HttpModule, but be aware that it is depreciated in the new versions.