1
Bom Dia Amigos,
I am learning Angular, using version 4.4.6 with Angular-Cli and am having problems using http post service.
First I created a date folder where I stored my json file and added it in the angular-cli.json file.
.angular-cli.json:
"assets": [
"assets",
"favicon.ico",
"data"
],
Then I added the Httpclientmodule module to the app.modulets file.
app.modulets.:
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
@NgModule({
declarations: [
AppComponent,
CadastroComponent
],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And finally, my.Component register component to run an http post on my json file.
cadastro.component.ts:
import { Component, Input, Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ParametroComponent } from './../parametro/parametro.component';
@Component({
moduleId: module.id,
selector: 'cadastro',
templateUrl: './cadastro.component.html'
})
@Injectable()
export class CadastroComponent {
parametro: ParametroComponent = new ParametroComponent();
http: HttpClient;
private data_Url = './asset/data/data.json';
constructor(private http: HttpClient) {
this.http = http;
}
atualizar() {
event.preventDefault();
console.log(this.parametro);
this.http.post(this.data_Url, this.parametro).subscribe(() => {
this.parametro = new ParametroComponent();
console.log('Parametro Atualizado com sucesso');
}, erro => {
console.log(erro);
});
}
}
parametro.component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'parametro',
templateUrl: './parametro.component.html',
styleUrls: ['./parametro.component.css']
})
export class ParametroComponent {
@Input() legado: string = '';
@Input() produto: string = '';
@Input() subproduto: string = '';
@Input() tpoevento: string = '';
@Input() familia: string = '';
@Input() tpocontrato: string = '';
@Input() descrevento: string = '';
@Input() cdorigem: string = '';
@Input() evenprivate: string = '';
@Input() efeposicao: string = '';
@Input() efeifinan: string = '';
@Input() excluirmov: string = '';
_id: string = '';
}
Finally, running the browser (Chrome) returns the POST error http://localhost:4200/data/data.json 404 (Not Found)
I found nothing that could help me solve this problem.
Thanks in advance for the help.
Create a route to perform this operation ... since the URL is being typed in the browser, the angler needs to know that this is a route ...
– Herbert Junior