• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 458
  • Last Modified:

Angular 5 - HttpClient Post Service not working

I am having trouble getting a service with httpClient post and I'm confused with different versions and depreciated code.

Here is what I have:

// dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })

export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joel', lastName: 'Smith333'}),{headers: headers});
    return this.http.post('http://myurl.somefile.php', body, httpOptions);


// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './services/data.service';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  constructor(private dataService: DataService) {}

  myInsert() {
    if (this.dataService.insertData()) {
      alert('Data Inserted Successfully');



Open in new window

// app.component.html
<div class="btn btn-default" (click)="myInsert()">Click Me</div>

Open in new window

The issues are coming from the service...

httpOptions and the insertData functions has errors all over.

Can anyone please help to get this working with Angular 5 please?
1 Solution
you've a typo line 17, you've a right parenthesis misplaced :
    const body = JSON.stringify({firstName: 'Joel', lastName: 'Smith333'}),{headers: headers});
    const body = JSON.stringify({firstName: 'Joel', lastName: 'Smith333'},{headers: headers});
error2013Author Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now