angular 2 http get 404

Question

I'm trying to replicate the ngPrime datatable demo https://github.com/primefaces/primeng. I'm currently using the latest version of angular (4), along with angular-cli (dev mode). I dropped a json file into my app folder, which is where the service is located. I've tried to mess around with the path, but I can't figure this out. I continue to get a 404.

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Car} from './car';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class CarService {

constructor(private http: Http) {}

getCarsSmall() {
    return this.http.get('./cars-small.json')
                .toPromise()
                .then(res => <Car[]> res.json().data)
                .then(data => { return data; });
 }
}

Here is the src from their site. I did have to import rxjs toPromise and modify the angular core package definition.

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Car} from '../domain/car';

@Injectable()
export class CarService {

constructor(private http: Http) {}

getCarsSmall() {
    return this.http.get('/showcase/resources/data/cars-small.json')
                .toPromise()
                .then(res => <Car[]> res.json().data)
                .then(data => { return data; });
 }
}

Using the complete path solved the issue:

return this.http.get('/src/app/cars-small.json')

Take a look at [stackoverflow.com/questions/39406043/… question and answers) — alex kucksdorf
– alex kucksdorf, Commented Apr 7, 2017 at 16:50
I've seen other posts like the one you linked to. Do I need to use an observable to retrieve the file? Is the example I provided out of date/incorrect? — cbean14
– cbean14, Commented Apr 7, 2017 at 16:53
Have you tried to provide the complete path and not relative path... starting from whatever you have (maybe src?) — AVJT82
– AVJT82, Commented Apr 7, 2017 at 16:58
Should be working, look at the last comment at the bottom from march — alex kucksdorf
– alex kucksdorf, Commented Apr 7, 2017 at 17:00

cbean14 · Accepted Answer · 2017-04-07 16:59:15Z

1

For some reason making this change worked-

return this.http.get('/src/app/cars-small.json')

I don't really understand why I had to go up two directories, when the file is at the same level. I tried app/cars-small.json, and that didn't work either.

answered Apr 7, 2017 at 16:59

cbean14

1112 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

timelyxyz · Accepted Answer · 2017-08-15 00:18:16Z

0

Maybe you should add the folder into webpack package as an asset dir. Then you can request as http.get('api/config.json')...

  "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "api",
    "assets",
    "favicon.ico"
  ],....

answered Aug 15, 2017 at 0:18

timelyxyz

263 bronze badges

Collectives™ on Stack Overflow

angular 2 http get 404

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related