CODEWITHSUNDEEP
angularspring-bootjax-rs
slipperypete
slipperypete

Reputation: 6266

How to set an angular2 app up so that it can access a local rest service?

I have an angular2 app that I want to connect to a local rest service built with spring boot. I want to be able to run the rest service on its own port, and then the angular2 app on a different port but be able to make http calls to the rest service. I use postman to test the rest service, and the rest service seems to be running as expected.

How do you set up an angular2 app so that it can make http calls to a local rest service?

When I use this code in my angular2 app, then I get an error which does not make sense to me. This is the code.

in app.component

var data={data:"hi from angular2"};
var api="apikey";
this.ghttp.sendJson(data,api)
  .subscribe((res)=>{
    console.log(JSON.stringify(res));
  });

in Http service

  sendJson(jsonData, apiKey){
    var localhost= "http://127.0.0.1:8080/";
    var mail = "email";
    const headers = new Headers();
    var body = JSON.stringify(jsonData);
    var url = localhost+mail;
    console.log(url);
    headers.append("api-key",apiKey);
    headers.append("Content-Type", "application/json");

    return this.http
      .post(url, body, {headers:headers} )
      .map((res:Response)=> res.json() );

  }

This is the error I get:

[Error] EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: Response with status: 500 Internal Server Error for URL: null g (Script Element 1:68:175) handleError (main.bundle.js:61731) (anonymous function) (main.bundle.js:28298) onInvoke (main.bundle.js:30637) run (main.bundle.js:115785) (anonymous function) (main.bundle.js:116173) invokeTask (main.bundle.js:115936) onInvokeTask (main.bundle.js:30628) invokeTask (main.bundle.js:115935) runTask (main.bundle.js:115825) drainMicroTaskQueue (main.bundle.js:116072) promiseReactionJob

There is also this line in the error message

"unable to parse url 'http://127.0.0.1:8080/email'; original error: undefined is not an object (evaluating 'collectionName.split')"

As mentioned I can create a request with postman for the address "http://127.0.0.1:8080/email" and it works, just fine, but the angular2 app throws the above error when making a request to this address.

Any ideas of how to make this work?

Upvotes: 1

Views: 490

Answers (1)

slipperypete
slipperypete

Reputation: 6266

After some research I realized there was a couple problems affecting this. The first one was the InMemoryWebApi. While I followed the docs In memory webapi docs and added the line in app.module.ts InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), it seems like this was blocking access to the local rest service, but was allowing my app to access the google maps api like it should. Once I figured this out, then I had another error related to cross domain requests. I found this SO link useful See this to allow cross domain access for an angular2/jaxrs app, for configuring my jaxrs service to be able to accept the requests from the angular2 app. You can add a function One of my JAX resource classes implements ContainerResponseFilter and then I have a method like this...

@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext cres) throws IOException {
    cres.getHeaders().add("Access-Control-Allow-Origin", "http://localhost:4200");
    cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization, api-key, employeeId");
    cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
    cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    cres.getHeaders().add("Access-Control-Max-Age", "1209600");
    cres.getHeaders().add("Access-Control-Max-Age", "1209600");
}

Upvotes: 1

Related Questions