使用 RXJS 5.0.0-beta.6 和 Angular 2 RC1 导入运算符

Question

我正在使用 Typescript 构建一个 Angular 2 网络应用程序，并试图从 Angular2-beta-17 切换到 Angular2-RC1。我正在努力让 RXJS 运营商的进口工作。我正在使用 SystemJS 作为模块加载器，我怀疑这是问题所在。

我将我需要的文件包从我的节点模块复制到一个 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 都很陌生，所以如果我在这里遗漏了一些微不足道的东西，我很抱歉。

Answer 1

这里的问题是你没有将 Rxjs 定义到 packages 块中。所以 SystemJS 不会将默认扩展名附加到模块名称。

查看从 5 分钟快速入门中获取的配置（参见 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' };
});

使用 RXJS 5.0.0-beta.6 和 Angular 2 RC1 导入运算符

Importing operators with RXJS 5.0.0-beta.6 and Angular 2 RC1

rxjs

systemjs

angular