Angular 4: Error when executing HTTP POST in JSON file: Not Found 404

1

Good Morning Friends,

I'm learning Angular, using version 4.4.6 with Angular-Cli and I'm having trouble using the http post service.

First I created a date folder where I stored my json file and added it to the angular-cli.json file.

.angular-cli.json: "assets": [ "assets", "favicon.ico", "data" ],

Then I added the HttpClientModule module in the app.module.ts file

app.module.ts:

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 cadastro.component to run an http post in 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 = '';

  }

Lastly, running the browser (Chrome) returns the POST error link 404 (Not Found)

I did not find anything that could help me solve this problem.

Thank you in advance for the help.

    
asked by anonymous 08.12.2017 / 14:40

0 answers