angualr2 use the http.get() to request the local json data

Question

Recently i am learn the angular2's http client and i have finished the demo with angular-in-memory-web-api.Now i want to use http.get to request the local json data ,but browser tell me zone.js:1980 GET http://localhost:4200/app/hero.json 404 (Not Found),after read the related posts of Angular2 404 Not Found for URL: http://localhost/WebApi2/api/hero and the simliar one of angular get, i have removed the 'angular-in-memory-web-api' ,InMemoryWebApiModule.forRoot(HeroData) and the related file from my project ,but the issue of 404 (Not Found) is stil exists,the key code is following:

//app.module.ts
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    HeroListPromiseComponent,
    WikiComponent,
    WikiSmartComponent
  ],
  providers: [ requestOptionsProvider ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

//hero.service.tsenter code here

@Injectable()
export class HeroService {
  private heroesUrl = 'app/hero.json';

  constructor (private http: Http) {}

  getHeroes(): Observable<Hero[]> {
    // debugger;
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    // http.get or http.post return the json obj
    let body = res.json();
    return body.data || { };
  }

if you want all code, i have pushed it to my github.this is the address

anyone can help me please

I think you just need to set your url to `private heroesUrl = './app/hero.json';` — Mike Tung, May 17 '17 at 03:38
You haven't subscribed the observable returned by http.get method. — Yashwardhan Pauranik, May 17 '17 at 03:42
@ Mike Tung i have try to use `private heroesUrl = './app/hero.json';` instead `private heroesUrl = './app/hero.json';` but that is unuseful, — leven, May 17 '17 at 08:20
@ Yashwardhan Pauranik the hero.service is only responsible for fetch data from server and its method will return the Observable object to the component ,then the will subscribe the Observable.if you are interested,would you like clone my complete code form [my github](https://github.com/clfeng/angular-http-client-issue) and improve it ? — leven, May 17 '17 at 08:30

score 0 · Answer 1 · answered May 17 '17 at 04:28

You need to change the webpack configuration. Try this:

{
                test: /\.json$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].json'
                        }
                    }
                ]
            }

If you are using vendor.ts file means try this:

import './app/hero.json';

In Service:

@Injectable()
export class HeroService {
  private heroesUrl = './app/hero.json';

  constructor (private http: Http) {}

  getHeroes(): Observable<Hero[]> {
    // debugger;
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    // http.get or http.post return the json obj
    let body = res.json();
    return body.data || { };
  }

thanks for your particular answer. i use angular cli to create my scattle and i checkout my project carefully,but i can't find the wepback's config file either vendor. so now i dont kown how to do — leven, May 17 '17 at 08:42

score 0 · Answer 2 · answered Jun 04 '17 at 07:54

thanks for everyone who try to help me solve the problem.just now,i found the answer which mean we should put the accessible resource in the assets file in order that user can get from the server.so i just try it and the problem was solved. wish this is helpful for everyone who encounter the problem; the answer i saw

angualr2 use the http.get() to request the local json data

2 Answers2