CODEWITHSUNDEEP
angular
Sako73
Sako73

Reputation: 10147

Getting 404 error with Angular 4 http request

I have the following code in my AngularJS4 project:

const url = "http://localhost:4151/test";
     this.http.get(url).toPromise()
         .then((r) => {
             console.log("SUCCESS", r);
         })
         .catch((e) => {
             console.error("ERR", e);
         });

The URL works fine when typed in the browser bar, and I have enabled CORS headers on the server side:

// Allow CORS
this.app.use(function(req: Request, res: Response, next: Function) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

Whenever I make a call to the server from my Angular application, it returns a 404 - Not Found error.

Any ideas how to fix this?

Thanks.

Upvotes: 1

Views: 6283

Answers (3)

Amaranadh Meda
Amaranadh Meda

Reputation: 724

HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false }
)

Remove the above line from your app.module.ts file. I guess you put this in your project part of learning the httpclient from the documenta

Upvotes: 1

KLMN
KLMN

Reputation: 559

For someone having the same problem, I fixed by adding "@ResponseBody" on my back-end spring RESTful method.

Upvotes: 0

Sako73
Sako73

Reputation: 10147

In case someone finds this question before the one below.

This was the problem: Angular4 giving 404 for json data that exists and is publicly serving

I had used the tutorial as a base, and was still using the HttpClientInMemoryWebApiModule to intercept http calls. I commented it out and it works fine.

...
// This needed to be commented out vvv
// import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api";
// import { InMemoryDataService } from "./services/dataSvc/in-memory-data.service";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        MyRoutingModule,
        HttpClientModule,

        // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
        // and returns simulated server responses.
        // Remove it when a real server is ready to receive requests.
        // This needed to be commented out vvv
        // HttpClientInMemoryWebApiModule.forRoot(
        //     InMemoryDataService, { dataEncapsulation: false }
        // )
    ],
    providers: [MessageService],
    bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 4

Related Questions