我正在使用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都很陌生,所以如果我在这里遗漏了一些微不足道的话,我很抱歉 .
1 回答
这里的问题是你没有将Rxjs定义到包块中 . 因此SystemJS不会为模块名称附加默认扩展名 .
请参阅5分钟快速入门中的此配置(请参阅https://angular.io/guide/quickstart):