Angular 2: Please add a @NgModule annotation



  • I'm having an error asking to add @NgModule annotation. 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 will 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;
    });
    }

    }

    Listing Service

    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...



  • Yours AppModule you must import the module HttpModule the @angular/http or HttpClientModule the @angular/common/http.

    Woe to your components and/or services you Http the @angular/http or HttpClient the @angular/common/http.

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

    If your project uses a version below that, use the HttpModulebut be aware that he is depreciated in the new versions.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2