Angular2 http fehlt .MAP Funktion

Question

ich diesen Beispielcode in einem tutorial gefunden:

getRandomQuote() { 
    this.http.get('http://localhost:3001/api/random-quote') 
    .map(res => res.text()) 
    .subscribe(
     data => this.randomQuote = data, 
     err => this.logError(err), 
    () => console.log('Random Quote Complete') 
    ); 
} 

Aber wenn man versucht, es zu benutzen, bekomme ich nur TypeError: this.http.get(...).map is not a function in [null]:

getChannels():Promise<Channel> { 
    return this.http.get('...') 
     .map(function (response:Response) { 
      ... 
     }).toPromise(); 
} 

Mein Typoskript Compiler sagt mir dass diese Methoden verfügbar sind, aber bei der Überprüfung des Rückgabewerts http.get() fehlen.

nutzte ich die package.json der aktuellen angualar2 Ausgangsführung:

"dependencies": { 
    "angular2": "2.0.0-beta.0", 
    "systemjs": "0.19.6", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.0", 
    "zone.js": "0.5.10" 
}, 

...

<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/http.dev.js"></script> 

Alle Ideen, was ich an dieser Stelle bekomme falsch könnte?

Answer 1

Sie wollen Ihre index.html sollte so aussehen, damit system.js alle Rxjs-Abhängigkeiten findet, die Sie in Ihre Komponenten importieren.

 <script src="/lib/anguar2/angular2-polyfills.js"></script> 
 
     <script src="/lib/es6-shim/es6-shim.js"></script> 
 
     <script src="/lib/systemjs/system.src.js"></script> 
 

 
     <script> 
 
      System.config({ 
 
       defaultJSExtensions: true, 
 
       packages: { 
 
        app: { 
 
         format: 'register' 
 
        } 
 
       }, 
 
       map: { 
 
        'rxjs':"lib/rxjs" 
 

 
       } 
 
      }); 
 
     </script> 
 
     <script src="/lib/anguar2/angular2.dev.js"></script> 
 
     <script src="/lib/anguar2/router.dev.js"></script> 
 
     <script src="/lib/anguar2/http.js"></script> 
 
     <script> 
 
      System.import('app/boot'); 
 
     </script>

Stellen Sie sicher, die "lib/rxjs" Ordner alle Dateien aus den node_modules hat/rxjs Ordner. Nicht alle von ihnen werden geladen, nur die, die Sie brauchen und ihre Abhängigkeiten (system.js wird dies für Sie herausfinden).

Jetzt können Sie dies in Ihrer boot.ts Datei:

import 'rxjs/add/operator/map';

Answer 2

Observable Standardmäßig kommt nur ein paar Operatoren. Sie müssen sie explizit importieren:

import 'rxjs/add/operator/map'; 

oder, wenn Sie wollen, um es nicht glauben, einfach alles laden (in der Bootstrap-Datei, zum Beispiel):

import 'rxjs/Rx';