【发布时间】：2016-05-12 02:00:42
【问题描述】：
我正在使用 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 都很陌生，所以如果我在这里遗漏了一些琐碎的东西，我很抱歉。
【问题讨论】：
-
如果你使用 systemJS，你不应该像那样直接加载所有这些脚本。请参阅the quickstart - 您只需要加载几个 shims 并让 systemJS 完成剩下的工作
-
谢谢，我用错了systemJS，已经开始学习如何使用它了。