Importieren von Operatoren mit RXJS 5.0.0-beta.6 und Angular 2 RC1

Ich baue eine Angular 2-Webanwendung mit Typescript und versuche, von Angular2-beta-17 zu Angular2-RC1 zu wechseln. Ich kämpfe darum, dass die Importe der RXJS-Betreiber funktionieren. Ich benutze SystemJS als Modullader und vermute, dass dies das Problem ist.Importieren von Operatoren mit RXJS 5.0.0-beta.6 und Angular 2 RC1

Ich kopiere die Dateipakete, die ich von meinen Knotenmodulen benötige, in einen lib-Ordner und lege dann die Dateien in die index.html Datei ein (die kommentierten Abschnitte sind einige der vielen Kombinationen verschiedener Lösungsversuche)) versucht:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Workout Player</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <!-- <link rel="stylesheet" href="styles.css"> --> 

    <script src="lib/es6-shim.min.js"></script> 

    <script src="lib/Rx.umd.js"></script> 
    <script src="lib/Reflect.js"></script> 
    <script src="lib/zone.js"></script> 

    <script src="lib/system-polyfills.js"></script> 
    <script src="lib/system.src.js"></script> 

    <script src="lib/core.umd.js"></script> 
    <script src="lib/common.umd.js"></script> 
    <script src="lib/http.umd.js"></script> 
    <script src="lib/compiler.umd.js"></script> 
    <script src="lib/platform-browser.umd.js"></script> 
    <script src="lib/platform-browser-dynamic.umd.js"></script> 

    <script src="lib/crypto-js.js"></script> 
    <script src="lib/angular2-jwt.js"></script> 
    <!-- <script src="lib/shims_for_IE.js"></script> --> 
    <!-- <script src="lib/angular2-polyfills.js"></script> --> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js', 
      }, 
     // 'rxjs'        : {main: 'Rx.umd.js'}, 
     // '@angular/core'     : {main: 'core.umd.js'}, 
     // '@angular/common'     : {main: 'common.umd.js'}, 
     // '@angular/compiler'    : {main: 'compiler.umd.js'}, 
     // '@angular/router'     : {main: 'router.umd.js'}, 
     // '@angular/platform-browser'  : {main: 'platform-browser.umd.js'}, 
     // '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.js'} 
     }, 
     map: { 
      'crypto-js': 'lib/crypto-js.js', 
      'angular2-jwt': 'lib/angular2-jwt.js', 
      'rxjs': 'lib', 
      // 'rxjs/*': 'lib', 
      // 'rxjs/add/operator/*': 'lib/Rx.umd.js', 
      '@angular/core'     : 'lib', 
      '@angular/common'     : 'lib', 
      '@angular/http'     : 'lib', 
      '@angular/compiler'    : 'lib', 
      '@angular/platform-browser'  : 'lib', 
      '@angular/platform-browser-dynamic': 'lib' 
     }, 
     // paths: { 
     //   'rxjs/observable/*' : 'lib/Rx.umd.js', 
     //   'rxjs/operator/*' : 'lib/Rx.umd.js', 
     //   'rxjs/*' : 'lib/Rx.umd.js' 
     //  } 
     }); 
     System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 

    <style>body { width:100%;}</style> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <workout-player>Loading...</workout-player> 
    </body> 
</html>

die Einfuhren der Operatoren wie dies getan werden:

import {Injectable, Inject} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
import CryptoJS from 'crypto-js'; 
import {JwtHelper} from 'angular2-jwt'; 
import {Observer} from 'rxjs/Observer'; 
import {LocalStorageService} from '../storage/local-storage.service'; 
import {HTTP_PROVIDERS, Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/retry'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
/** 
* Service class for handling login 
*/ 
export class LoginService {...

hatte ich damit kein Problem in Angular2-beta17 wenn die angular2-dev.js Bundle-Datei verwenden. Die Fehler, die ich jetzt in der Entwicklerkonsole in Chrome erhalte:

Der Browser sollte nicht versuchen, diese Ressourcen überhaupt zu erhalten. Ich bin ziemlich neu sowohl mit Angular als auch mit SystemJS, also tut es mir leid, wenn ich hier etwas Triviales verpasse.

Quelle

2016-05-12 Fredrik Rafn Strandberg

Wenn Sie systemJS verwenden, sollten Sie nicht diese Skripte alle so direkt geladen werden. Siehe [die Schnellstart] (https://angular.io/docs/ts/latest/quickstart.html) - Sie müssen nur ein paar Shims laden und lassen Sie SystemJS den Rest – drewmoore

Vielen Dank, ich war mit systemJS falsch und habe begonnen, darüber zu lesen, wie man es benutzt. –

Das Problem hier ist, dass Sie Rxjs auch nicht in einen Paketblock definieren. Daher fügt SystemJS keine Standarderweiterung für Modulnamen hinzu.

Sehen Sie diese Konfiguration aus der 5 min quickstart genommen (siehe https://angular.io/guide/quickstart):

var packages = { 
    'app': { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' }, // <---------- 
    'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
}; 

var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
]; 

packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
});

Quelle

2016-05-12 07:06:11

Vielen Dank Thierry! Ich habe den 5-minütigen Schnellstart vor ein paar Monaten verfolgt, aber es hat sich sehr verändert, was ich nicht bemerkt habe. Ich habe Paketblöcke und Standard-Erweiterung verwendet und habe es funktioniert. Ich habe auch aufgehört, Dateien in einen lib-Ordner zu kopieren, den ich nur für einen "Distribution" -Build der Single-Page-App, die ich erstelle, vorbereitet habe, aber ich werde mich auf die Entwicklung konzentrieren und mich später um Verteilung kümmern :-) –

Importieren von Operatoren mit RXJS 5.0.0-beta.6 und Angular 2 RC1

Antwort

Verwandte Themen