Question

我正在使用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的开发者控制台中遇到的错误：

浏览器不应该尝试获取这些资源。我对Angular和SystemJS都很陌生，所以如果我在这里遗漏了一些小事，我很抱歉。

Answer 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' };
});

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

1 个答案: