我有以下 systemjs.config.js
(基于我在 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
:
(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);
当我现在尝试启动我的应用程序时,我在浏览器中收到以下错误:
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 一起工作?
最佳答案
如果您的设置是基于 angular2 quickstart 的,那么您就可以了。
但是,你绝不能
import {something} from 'rxjs/Rx';
这是错误的,将导入整个 RxJS 库(当您只想使用 Observable 时)。
import {Observable} from 'rxjs/Rx';
这是正确的
import {Observable} from 'rxjs/Observable';
并且会减少进口数量。确保您的应用没有对“rxjs/Rx”的引用
PS 你不想把整个 RxJS 库放在一个文件中,因为它会很大。这就是只导入您需要的 RxJS 模块的全部原因。
关于angular - SystemJS 为 rxjs 加载很多文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40780363/