首页 文章

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

提问于
浏览
1

我正在使用Typescript构建一个Angular 2 Web应用程序,我正试图从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-dev.js包文件时,我在Angular2-beta17中没有遇到任何问题 . 我现在在Chrome的开发者控制台中遇到的错误:
Errors in developers console in Chrome

浏览器不应该尝试获取这些资源 . 我对Angular和SystemJS都很陌生,所以如果我在这里遗漏了一些微不足道的话,我很抱歉 .

1 回答

  • 1

    这里的问题是你没有将Rxjs定义到包块中 . 因此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' };
    });
    

相关问题