SystemJS为rxjs加载许多文件 [英] SystemJS loads many files for rxjs
问题描述
我有以下systemjs.config.js
(基于我在互联网上找到的一些示例):
I have the following systemjs.config.js
(based on some example I found on the internet):
(function (global) {
System.config({
paths: {
// paths serve as alias
'js:': 'js/',
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'js:angular2/core.umd.js',
'@angular/common': 'js:angular2/common.umd.js',
'@angular/compiler': 'js:angular2/compiler.umd.js',
'@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
'@angular/http': 'js:angular2/http.umd.js',
'@angular/router': 'js:angular2/router.umd.js',
'@angular/forms': 'js:angular2/forms.umd.js',
'@angular/upgrade': 'js:angular2/upgrade.umd.js',
// other libraries
'rxjs': 'js:rxjs',
'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
当我启动Angular2应用程序时,会加载许多单独的rxjs文件,这需要很长时间.我在js/rxjs/bundles/Rx.js
中有一个捆绑的RxJs版本,所以我试图像这样修改systemjs.config.js
:
When I start my Angular2 application many individual rxjs files are loaded which takes a long time. I have a bundled version of RxJs in js/rxjs/bundles/Rx.js
, so I tried to modify systemjs.config.js
like this:
(function (global) {
System.config({
paths: {
// paths serve as alias
'js:': 'js/',
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'js:angular2/core.umd.js',
'@angular/common': 'js:angular2/common.umd.js',
'@angular/compiler': 'js:angular2/compiler.umd.js',
'@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
'@angular/http': 'js:angular2/http.umd.js',
'@angular/router': 'js:angular2/router.umd.js',
'@angular/forms': 'js:angular2/forms.umd.js',
'@angular/upgrade': 'js:angular2/upgrade.umd.js',
// other libraries
'rxjs': 'js:rxjs/bundles/Rx.js',
'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
}
}
});
})(this);
当我尝试立即启动应用程序时,在浏览器中出现以下错误:
When I try to start my application now, I get the following error in the browser:
Error: (SystemJS) Syntax error
SyntaxError: Syntax error
at Anonymous function (eval code:2:1)
Evaluating http://localhost:37191/js/rxjs/bundles/Rx.js/Subject
Evaluating http://localhost:37191/app/main.js
Error loading http://localhost:37191/app/main.js
我的main.ts
看起来像这样:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
我的app.module.ts
看起来像这样:
import 'rxjs';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DeviceGroupsViewComponent } from './device-groups-view.component';
import { DeviceGroupService } from './devicegroup.service';
import { SourceTypeService } from './sourcetype.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
declarations: [
AppComponent,
DeviceGroupsViewComponent
],
providers: [
DeviceGroupService,
SourceTypeService
],
bootstrap: [AppComponent]
})
export class AppModule { }
要使我的应用程序与捆绑的Rx.js一起使用,我需要更改什么?
What do I have to change to make my app work with the bundled Rx.js?
推荐答案
如果您的设置基于angular2快速入门,那么您就可以了.
if your setup is based on angular2 quickstart then you are doing OK.
但是,您绝不能
import {something} from 'rxjs/Rx';
这是错误的,并且会导入整个RxJS库(当您只想使用Observable时).
this is wrong and will import the entire RxJS library (when you only want to use Observable).
import {Observable} from 'rxjs/Rx';
这是正确的
import {Observable} from 'rxjs/Observable';
,将减少进口数量.确保您的应用没有对"rxjs/Rx"的引用
and will reduce the number of imports. Ensure you app has no references to 'rxjs/Rx'
PS您不想将整个RxJS库放入单个文件中,因为它会很大.这就是仅导入所需的RxJS模块的全部原因.
PS You don't want to pull in the entire RxJS library in a single file as it would be very big. That's the whole reason behind only importing the RxJS modules you need.
这篇关于SystemJS为rxjs加载许多文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!