Linking up Angular & Node.js: TypeError: error.json is not a function

Question

I am studying a course to link up node.js and Angular. I am following the tutorial, but I get an error and I don't know what to do with it. Can anyone help?

This is the error I get

TypeError: error.json is not a function at CatchSubscriber.eval [as selector] (message.service.ts?5cfd:25) at CatchSubscriber.error (catchError.js?0867:104) at MapSubscriber._next (map.js?c4af:82) at MapSubscriber.Subscriber.next (Subscriber.js?215e:90) at XMLHttpRequest.onLoad (http.js?7a71:1591) at ZoneDelegate.invokeTask (zone.js?fad3:421) at Object.onInvokeTask (core.js?223c:4744) at ZoneDelegate.invokeTask (zone.js?fad3:420) at Zone.runTask (zone.js?fad3:188) at ZoneTask.invokeTask [as invoke] (zone.js?fad3:495) at invokeTask (zone.js?fad3:1536) at XMLHttpRequest.globalZoneAwareCallback (zone.js?fad3:1562)

And these are the files.

Message input component Here I enter the content of the new message:

import {Component} from "@angular/core";
import {MessageService} from "./message.service";
import {Message} from "./message.model";
import {NgForm} from "@angular/forms";

@Component({
    selector: 'app-message-input',
    templateUrl: './message-input.component.html'
})

export class MessageInputComponent {

    constructor(private messageService: MessageService){
    }

    onSubmit(form: NgForm) {
        const message = new Message(form.value.content, 'Tijl')
        this.messageService.addMessage(message)
            .subscribe(
                data => console.log(data),
                error => console.error(error)
            );
        form.resetForm()

    }
}

Message service : Here I connect to the Node.js back-end

import {Message} from "./message.model";
import {Http, Response} from "@angular/http";
import {Injectable} from "@angular/core";
import 'rxjs/rx';
import {Observable} from "rxjs/Observable";


@Injectable()
export class MessageService {
    private messages: Message[] = [];

    constructor(private http: Http){}

    addMessage(message: Message) {
        this.messages.push(message)
        // turn your message into json format
        const body = JSON.stringify(message);
        // pass this body to the post request
        // we subscribe in the component itself, so not in this service. We need the data
        // in the component so that's where we'll subscribe to it
        return this.http.post('http://localhost:3000/message', body)
            // json method allows to extract the data (not headers and such)
        // and convert it to Javascript object
            .map((response: Response) => response.json())
            .catch((error: Response) => Observable.throw(error.json()));
    }
}

The back-end route file it connects to:

var express = require('express'); var router = express.Router();

var Message = require('../models/message');

router.post('/', function (req,res,next){
    var message = new Message({
        content: req.body.content
    });
    message.save(function(err, result) {
        if (err) {
            return res.status(500).json({
                title: 'An error occurred',
                error: err
            });
        }
        res.status(201).json({
            message: 'Saved message',
            // this object is what we'll receive in the front-end
            // and what we'll convert using the response.json() method
            obj: result
        })
    })
});

module.exports = router;

Observable.throw(error.json()) did you mean Observable.throw(error.json) — Serge K.
@SergeK. No, OP is right. .json() is usually how you extract the payload from a response. — Jeremy Thille
Well, I followed the tutorial. Let me try it without the '()' — tilly
if error is already in JSON format, just use it as is. .catch((error: Response) => Observable.throw(error)) — Jeremy Thille

tilly tilly · Accepted Answer · 2018-01-11T14:03:00

Ok guys,

I found what went wrong. The code was fine, I just forgot to restart the server after making changes.

Linking up Angular & Node.js: TypeError: error.json is not a function

1 Answers