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