Unexpected json input end

Question

I am trying to display a warning after user registration. I tried to debug and realized that it will always work with an error (when the user is registered successfully and the user already exists).

Below is my code. I can’t understand why he is always misled. Any help is appreciated as I am stuck with this for a long time. Thanks in advance.

1) Warning component

import { AlertService } from './../../shared/services/alert.service'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-alert', templateUrl: './alert.component.html', styleUrls: ['./alert.component.css'] }) export class AlertComponent { private _alertService; private message: any; constructor(alertService: AlertService) { this._alertService = alertService; } ngOnInit() { this._alertService.getMessage().subscribe(message => { this.message = message; }); } } 

2.Alert Template

 <div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div> 

3) Registration Template

 <div class="container"> <h2>Register</h2> <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> <label for="username">Username</label> <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required /> <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div> </div> <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> <label for="password">Password</label> <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required minlength="10" /> <div *ngIf="f.submitted && !password.valid" class="help-block"> Password is required (minimum 10 characters)</div> </div> <div class="form-group"> <button class="btn btn-primary" (click)="registerUser()">Register</button> <app-alert></app-alert> <a [routerLink]="['']" class="btn btn-link">Cancel</a> </div> </form> </div> 

4) Register component

 import { AlertService } from './../../shared/services/alert.service'; import { RegisterService } from './../../shared/services/register.service'; import { Observable } from 'rxjs/Observable'; import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { AuthService } from '../../shared/services/index'; import { Http, Request, RequestMethod, RequestOptions, Headers, Response } from '@angular/http'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit { private _authService: AuthService; private _alertService: AlertService; private _regsiterService: RegisterService; private appContent = 'application/json'; private _router: Router; private baseUrl = 'http://localhost:5000/api/v1/'; model: any = {}; username: string; password: string; constructor(authService: AuthService, http: Http, router: Router, registerService: RegisterService, alertService: AlertService) { this._authService = authService; this._regsiterService = registerService; this._router = router; this._alertService = alertService; } ngOnInit() { } registerUser() { this._regsiterService.registerUser(this.model.username, this.model.password) .subscribe( data => { console.log('Calling alert'); this._alertService.success('Registration Successful'); this._router.navigate(['/login']); }, error => { console.log('Calling alert'); // this._alertService.error(error); }); } } 

5) Alert service

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; @Injectable() // Checks if a user is a authenticated user and has the valid token without expiration. export class AlertService { private subject = new Subject<any>(); success(message: string) { console.log('Registration Successful'); this.subject.next({ type: 'success', text: message }); } // error(message: string) { // console.log('Registration Failed'); // this.subject.next({ type: 'error', text: message }); // } getMessage(): Observable<any> { return this.subject.asObservable(); } } 

Below is a screenshot

Answer 1

In your html you have:

 (ngSubmit)="f.form.valid && register()" 

But your method:

 registerUser() { // .. } 

Thus, the angular parser cannot find the register method that is defined in your html.

Answer 2

Unexpected json input end

This error usually occurs when you have an http call that for some reason gets rejected (wrong URL, server is down, port is closed), and the response returned from the server is not JSON .

Look at your web tab and see what you do with http cal, what you get in the answers tab.

Basically this error usually means that Javascript was unable to parse something that was supposed to be JSON

Answer 3

If I were you, I would check for typos in the template and ts file.

Alternatively, you can try to simply import the services at the top of the file and simply add them in the constructor as follows:

constructor(private authService: AuthService, private http: Http, private router: Router, private registerService: RegisterService, private alertService: AlertService) { }

I think TS will complete the task for you. Then onInit() or any other place where you can write this.authService.someMethod() , etc.

Of course, the error “not a function” indicates spelling / typo.

As mentioned, register() exists in your html template, but not in the ts file. I would also rename RegisterComponent properties to avoid possible typos and errors in the future.

Answer 4

Unexpected end of json input may be due to the fact that you are not providing valid json from your server. I have not seen the code inside this._regsiterService.registerUser . But I believe that the response.json () response is causing, which is causing the problem.