angular 2 使用 http.get() 请求本地 json 数据答案

【问题标题】：angualr2 use the http.get() to request the local json dataangular 2 使用 http.get() 请求本地 json 数据
【发布时间】：2017-10-16 08:10:03
【问题描述】：

最近我在学习angular2的http客户端，我已经用angular-in-memory-web-api完成了demo。现在我想用http.get来请求本地json数据，但是浏览器告诉我zone.js:1980 GET http://localhost:4200/app/hero.json 404 (Not Found)，阅读相关帖子后Angular2 404 Not Found for URL: http://localhost/WebApi2/api/hero 和the simliar one of angular get 中的'angular-in-memory-web-api' ,InMemoryWebApiModule.forRoot(HeroData) 和我的项目中的相关文件，但404 (Not Found) 的问题仍然存在，关键代码如下：

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

如果您想要所有代码，我已将其推送到我的 github。这是address

谁能帮帮我

【问题讨论】：

我认为您只需将您的网址设置为private heroesUrl = './app/hero.json';
你还没有订阅 http.get 方法返回的 observable。
@Mike Tung 我尝试使用private heroesUrl = './app/hero.json'; 代替private heroesUrl = './app/hero.json';，但这没用，
@Yashwardhan Pauranik hero.service 只负责从服务器获取数据，它的方法会将 Observable 对象返回给组件，然后订阅 Observable。如果你有兴趣，你愿意克隆我的完整代码表单my github 并改进它？

标签： javascript angularjs json

【解决方案1】：

您需要更改 webpack 配置。试试这个：

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

【讨论】：

感谢您的特别回答。我使用 angular cli 创建我的 scattle 并仔细检查了我的项目，但我找不到任何供应商的 wepback 的配置文件。所以现在我不知道该怎么做

【解决方案2】：

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

【讨论】：