Angular 4: Error running HTTP POST in JSON File: Not Found 404

Asked

Viewed 293 times

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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.