CODEWITHSUNDEEP
angularrestapi
Ragini Patil
Ragini Patil

Reputation: 119

unable to send data from angular 2 front end to backend rest api

how to call a rest api from backend send data and get user data which is in json object 

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { User } from '../_models/index';

import { Http, Response, Headers, RequestOptions } from '@angular/http';


@Injectable()
export class UserService {
constructor(private http: HttpClient) { }



create(user: User) {
    console.log("in create user");
 return this._http.get("http:// localhost:8082/register").map(res => 
res.json());
//    return this.http.post('/api/users', user);
}
}

above is angular2 service.ts code to send user data to rest

below is RegisterComponent component.ts code:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { AlertService, UserService } from '../_services/index';

@Component({
moduleId: module.id.toString(),
templateUrl: 'register.component.html'
})

export class RegisterComponent {
model: any = {};
loading = false;

constructor(
    private router: Router,
    private userService: UserService,
    private alertService: AlertService) { }

register() {
    this.loading = true;
    this.userService.create(this.model)
        .subscribe(
            data => {
                this.alertService.success('Registration successful', true);
                this.router.navigate(['/login']);
            },
            error => {
                this.alertService.error(error);
                this.loading = false;
            });
}

}

from above component create is calling service method create from where i want to call post method in backend api

Below is rest api 

@RequestMapping(value = "/register", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE,
        MediaType.APPLICATION_XML_VALUE })
public ResponseEntity<Void> registrationUser(@RequestBody UserDetails user, HttpServletRequest request,
        HttpSession session, HttpServletResponse response) {
    if (user.getEmail() != null && user.getName() != null && user.getPhoneNumber() != null
            && user.getPassword() != null) {
        String name = user.getName();
        String email = user.getEmail();
        String phoneNumber = user.getPhoneNumber();
        String password = user.getPassword();
        {....
       }

                SendMail.sendMail(to, subject, msg);
                System.out.println("mail send");
                return new ResponseEntity<Void>(HttpStatus.OK);
            }
            return new ResponseEntity<Void>(HttpStatus.CONFLICT);

        } else
            return new ResponseEntity<Void>(HttpStatus.CONFLICT);
    }
    return new ResponseEntity<Void>(HttpStatus.CONFLICT);
}

error: ERROR in src/app/_services/user.service.ts(6,57): error TS2307: Cannot find module '@angular/http'. src/app/_services/user.service.ts(28,14): error TS2551: Property '_http' does not exist on type 'UserService'. Did you mean 'http'?

Upvotes: 2

Views: 1521

Answers (2)

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

First Error

error: ERROR in src/app/_services/user.service.ts(6,57): error TS2307: Cannot find module '@angular/http

Add HttpModule in app.module.ts

 import {HttpModule} from '@angular/http'

 @NgModule({
    imports:[
      HttpModule
    ]
 })

Second Error

error TS2551: Property '_http' does not exist on type 'UserService'. Did you mean 'http'?

Your Code looking wrong

constructor(private http: HttpClient) { }

Declared Variable name http. But you used like _http 

 return this._http.get("http:// localhost:8082/register").map(res =>

so change that line this.http instead of this._http

 return this.http.get("http:// localhost:8082/register").map(res =>

I hope this solved your Error.

Upvotes: 0

Thomas Rokicki
Thomas Rokicki

Reputation: 634

This code snippet is from the code in your first code block.

return this._http.get("http:// localhost:8082/register").map(res => res.json());

I believe you want this line to read

return this.http.get("http:// localhost:8082/register").map(res => res.json());

That seems to be what the error is complaining about. Good Luck!

Upvotes: 0

Related Questions