Angular 2: Please add a @NgModule annotation

0

I'm having an error asking to add the annotation @NgModule. But I believe this is okay. 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.ts

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

ListComponent

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

}

ListService

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

My AppModule

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

I wonder if I'm missing something ...

    
asked by anonymous 04.12.2017 / 18:22

1 answer

0

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

In your components and / or services you import the Http of @angular/http or HttpClient of @angular/common/http .

Note, there is a large difference between HttpModule and HttpClientModule . HttpClientModule is the new HTTP API for Angular and is available from version 4.3. Its API is now stable in Angular 5 or in the last releases of Angular 4, after all Angular 4 has been defined as LTS (Long Term Support).

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

    
04.12.2017 / 20:22