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

最近我正在学习angular2的http客户端，我已经用

angular内存web api

完成了演示。现在我想使用http.get请求本地json数据，但浏览器告诉我

zone.js:1980 gethttp://localhost:4200/app/hero.json 404（未找到）

，阅读和的相关帖子后，我已经从我的项目中删除了

'angular-in-memory-web-api'

，

inmemoryWebapModule.forRoot（HeroData）

和相关文件，但是

404（未找到）

的问题仍然存在，关键代码如下：

//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

在此处输入代码

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

@Injectable（）
导出类服务{
private-heroesUrl='app/hero.json'；
构造函数（私有http:http）{}
getHeroes（）：可观察{
//调试器；
返回this.http.get（this.heroesUrl）
.map（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
//http.get或http.post返回json对象
让body=res.json（）；
返回body.data |{}；
}

如果您需要所有代码，我已经将其推送到我的github

---

任何人都可以帮助我，请

您需要更改网页包配置。请尝试以下操作：

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

如果您使用的是vendor.ts文件，请尝试以下操作：

import './app/hero.json';

在职：

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

@Injectable（）
导出类服务{
私有heroesUrl='./app/hero.json'；
构造函数（私有http:http）{}
getHeroes（）：可观察{
//调试器；
返回this.http.get（this.heroesUrl）
.map（此.extractData）
.接住（这个.把手错误）；
}
私有数据（res:Response）{
//http.get或http.post返回json对象
让body=res.json（）；
返回body.data |{}；
}

感谢所有试图帮助我解决问题的人。刚才，我找到了答案，这意味着我们应该将可访问的资源放在资产文件中，以便用户可以从服务器获取。因此，我只是尝试了一下，问题就解决了。希望这对遇到问题的所有人都有帮助；

我认为您只需要设置url到

private-heroesUrl='./app/hero.json'；

您还没有订阅http.get方法返回的可观察对象。@Mike Tung我尝试使用

private-heroesUrl='./app/hero.json'；

而不是

private-heroesUrl='./app/hero.json'；

但这是无用的，@Yashwardhan-Pauranik the-hero.service只是响应ible用于从服务器获取数据，其方法将可观察对象返回到组件，然后将订阅可观察对象。如果您感兴趣，是否要克隆我的完整代码表单并对其进行改进？感谢您的特别回答。我使用angular cli创建散点，并仔细检查我的项目，但我找不到e wepback的配置文件不是供应商的。所以现在我不知道怎么做