Импорт операторов с RXJS 5.0.0-beta.6 и Angular 2 RC1

Я создаю веб-приложение с угловым 2, используя TypScript, и пытаюсь переключиться с Angular2-beta-17 на Angular2-RC1. Я изо всех сил пытаюсь заставить импорт операторов RXJS работать. Я использую SystemJS в качестве загрузчика модуля, и подозреваю, что это была проблема.Импорт операторов с RXJS 5.0.0-beta.6 и Angular 2 RC1

Я копирую файлы, которые мне нужны, из модулей узлов в lib-папку, а затем включаю файлы в файл index.html, как это (комментарии представляют собой некоторые из многих комбинаций различных попыток для решений, которые у меня есть пробовал):

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

импорт операторов выполняются так:

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 {...

у меня не было никаких проблем с этим в Angular2-beta17 при использовании angular2-dev.js файл связки. Ошибки, которые я сейчас получаю в консоли разработчиков в Chrome:

Браузер не должен пытаться получить эти ресурсы вообще. Я совершенно новичок как с Angular, так и с SystemJS, поэтому мне жаль, если я пропустил здесь что-то тривиальное.

источник

2016-05-12 Fredrik Rafn Strandberg

Если вы используете systemJS, вы не должны загружать все эти сценарии непосредственно, как это. См. [Быстрый старт] (https://angular.io/docs/ts/latest/quickstart.html) - вам просто нужно загрузить пару прокладок и позволить systemJS делать все остальное – drewmoore

Спасибо, я использовал systemJS неправильно и начали читать о том, как его использовать. –

Проблема заключается в том, что вы не определяете Rxjs в пакетный блок. Поэтому SystemJS не добавляет расширение по умолчанию к именам модулей.

Смотрите эту конфигурацию, взятую из 5 мин QuickStart (см 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' }; 
});

источник

2016-05-12 07:06:11

Спасибо Тьерри! Несколько месяцев назад я следовал 5-минутному быстрому старту, но он сильно изменился, чего я не заметил. Я использовал блоки пакетов и расширение по умолчанию и получил его работу. Я также прекратил копировать файлы в папку lib, которые я только сделал, чтобы попытаться подготовиться к сборке «распространения» приложения Single Page App, которое я создаю, но я сосредоточусь на развитии и заботе о распределении позже :-) –

Импорт операторов с RXJS 5.0.0-beta.6 и Angular 2 RC1

ответ

Смежные вопросы