Angular2基本GET請求失敗（可能是TS編譯問題？）

Question

我有3種問題串聯運行。我想了解更多關於服務/組件，所以我想做一個非常基本的GET請求。

我steam.service.ts：

import { Injectable } from '@angular/core'; 
    import { Http, Response, RequestOptions } from '@angular/http'; 
    import { Observable } from 'rxjs/Rx'; 

    import { Steam } from './steam' 

    @Injectable() 
    export class SteamService { 
     private steamUrl = "http://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v0001/?key={redacted}&steamids={redacted2}"; 

     constructor(
      private http: Http 
    ) {} 

     getGames(): Observable<Game[]> { 
     return this.http.get(this.steamUrl) 
        .map(response => response.json()) 
        .catch(this.handleError); 
     } 

     private handleError (error: Response | any) { 
      let errMsg: string; 
      if (error instanceof Response) { 
       const body = error.json() || ''; 
       const err = body.error || JSON.stringify(body); 
       errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
      } else { 
       errMsg = error.message ? error.message : error.toString(); 
      } 
      console.error(errMsg); 
      return Observable.throw(errMsg); 
     } 
    } 

我steam.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

import { Steam } from './steam' 
import { SteamService } from './steam.service' 

@Component({ 
    moduleId: module.id, 
    selector: 'steam', 
    templateUrl:'steam.component.html', 
    providers: [ SteamService ] 
}) 
export class SteamComponent implements OnInit { 
    games: Game[]; 
    errorMessage: string; 
    mode = "Observable"; 

    constructor(
     private steamService: SteamService 
    ) {} 

    getGames() { 
     this.steamService.getGames() 
      .subscribe(
       games => this.games = games, 
       error => this.errorMessage = <any>error 
      ); 
    } 

} 

我steam.ts文件

export interface Game { 
    appid: string, 
    name: string, 
    playtime_2weeks: number, 
    playtime_forever: number, 
    img_icon_url: string, 
    img_logo_url: string 
} 

這個代碼庫在很大程度上反映過其他三個組成部分我有工作完美。我原本是出口'遊戲'作爲一個組成部分，並認爲這是我的問題的一部分。當我將其改爲接口時，我得到的錯誤是一時的 - 消失。

有一個問題是刷新或編譯的有時。上面寫着

ERROR in ~app/steamGames/steam"' has no exported member 'Steam'.) 
/home/ubuntu/workspace/freelancedemo/src/app/steamGames/steam.component.ts (13,14): Class 'SteamComponent' incorrectly implements interface 'OnInit'. 
    Property 'ngOnInit' is missing in type 'SteamComponent'.) 
~/src/app/steamGames/steam.component.ts (14,12): Cannot find name 'Game'.) 

ERROR in ~steamGames/steam"' has no exported member 'Steam'.) 
~/steam.service.ts (15,26): Cannot find name 'Game'.) 

在我看來，這樣的問題可能是由我的界面被命名「遊戲」造成的？改變界面到Steam將使這個錯誤停止，但這將隨機顯示保存/編譯無濟於事。

我真正的問題是，API調用是從來沒有被做 - 我看過網絡標籤，檢查了HTML，沒有結果。 app.module.ts 從'./steamGames/steam.component'導入{SteamComponent};從'./steamGames/steam.service'導入{SteamService};

import { AppRoutingModule } from './app-routing.module'; 

    @NgModule({ 
     imports: [ 
      ... 
     ], 
     declarations: [ 
      ... 
      SteamComponent 
     ], 
     providers:[ 
      ... 
      SteamService 

我包括它，它在我的路線。

我注意到的一件事是Webpack（我特別使用Ang2CLI）沒有映射TS - > JS。我不知道如何強制這種情況發生，但我自然認爲這是我的主要罪魁禍首，那麼你如何強制它正確編譯？

編輯：強制AngCLI使成分，並沒有映射：

steam.component.js AFTER AngCLI Compiled

"use strict"; 
Object.defineProperty(exports, "__esModule", { value: true }); 
var module_1 = require(); 
if (viewEncapsulation) { 
    % > , ViewEncapsulation < % ; 
} 
% > % ; 
if (changeDetection) { 
    % > , ChangeDetectionStrategy < % ; 
} 
% > ; 
from; 
'@angular/core'; 
if (inlineTemplate) { 
    % > 
     template; 
    "\n <p>\n  steam Works!\n </p>\n ", % ; 
} 
else { 
    % > 
     templateUrl; 
    './steam.component.html', % ; 
} 
if (inlineStyle) { 
    % > 
     styles; 
    [] < % ; 
} 
else { 
    % > 
     styleUrls; 
    ['./steam.component.scss'] < % ; 
} 
% > % ; 
if (viewEncapsulation) { 
    % > , 
     encapsulation; 
    ViewEncapsulation. < ; 
    viewEncapsulation % > % ; 
} 
if (changeDetection) { 
    % > , 
     changeDetection; 
    ChangeDetectionStrategy. < ; 
    changeDetection % > % ; 
} 
% > 
; 
var default_1 = (function() { 
    function default_1() { 
    } 
    return default_1; 
}()); 
% > module_1.Component; 
implements; 
module_1.OnInit; 
{ 
    constructor(); 
    { } 
    ngOnInit(); 
    { 
    } 
} 
//# sourceMappingURL=__name__.component.js.map 

Answer 1

你有2個問題。

在您的SteamComponent中，您定義了一個getGames()方法，但不會在任何地方調用它。

其次，你的SteamComponent實現OnInit，但該接口要求你有一個ngOnInit方法在你的課堂上。您的SteamComponent沒有定義該方法。

ngOnInit是由Angular創建組件時調用的方法，所以這是您希望將您的調用發送到您的方法的方法。

Answer 2

我能解決它，我實際上面臨着多個問題。

A）編譯問題： 我遵循Ang-CLI的Rails-esque生成器工具here。這產生了我寫過的'模板'。但是，由於導演，我仍然有編輯問題。我必須進入file.type.js.map並編輯,"sourceRoot":"",以正確反映它的位置。

一旦被編譯我的問題就解決了

B）NgOnInit Warning - 雖然這種警告也是在當它會催生它是正確的氣質 - 我從來沒有使用過，只是實現了它。加入

ngOnInit() { 
    let timer = Observable.timer(0, 5000); 
    timer.subscribe(() => this.getGames()); 
} 

解決了我的問題

C）我是不是能夠正確修復的「遊戲」的錯誤。這個錯誤在重新加載時只會出現。 我終於將Game或者Observable Game更改爲我的界面，聲明和Steam的每個參考，並且它解決了我的問題。

結果發現我的笑話 - 蒸汽跟隨CORS，所以Angular本身無法完成呼叫。