angualr2使用http.get（）请求本地json数据

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.ts enter 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

Answer 1

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 || { };
  }

Answer 2

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