问题描述
我正在使用Typescript构建Angular 2 Web应用程序，并试图从Angular2-beta-17切换到Angular2-RC1.我正在努力使RXJS运算符的导入工作.我正在使用SystemJS作为模块加载器，并且怀疑这是问题所在.
I am building an Angular 2 web app using Typescript and am trying to switch from Angular2-beta-17 to Angular2-RC1. I am struggling to get the imports of the RXJS operators to work. I am using SystemJS as a module loader, and suspect this is were the problem lies.
我将所需的文件包从节点模块复制到lib文件夹，然后将文件包含在index.html文件中，如下所示(注释部分是我尝试过的解决方案的许多尝试的许多组合中的一部分):
I copy the file bundles I need from my node modules to a lib-folder and then include the files in the index.html file like this (the commented sections are some of the many combinations of different attempts for solutions I have tried):
<!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>
操作符的导入是这样完成的:
The imports of the operators are done like this:
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开发者控制台中遇到的错误:
I had no problem with this in Angular2-beta17 when using the angular2-dev.js bundle file. The errors I am now getting in the developers console in Chrome:
浏览器不应完全获取这些资源.我对Angular和SystemJS都很陌生，所以很抱歉如果我在这里错过了一些琐碎的事情.
The browser should not try to get these resources at all. I am quite new with both Angular and SystemJS so I'm sorry if im missing something trivial here.
推荐答案
这里的问题是，您也没有将Rxjs定义到packages块中.因此，SystemJS不会在模块名称后附加默认扩展名.
The problem here is that you don't define Rxjs into a packages block as well. So SystemJS doesn't append a default extension to module names.
请参阅从5分钟快速入门中获得的此配置(请参见 https://angular.io/guide/quickstart ):
See this configuration taken from the 5 min quickstart (see 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导入运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！