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')

Answer 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.

Answer 2

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"
  ],....