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 看起来像这样:

My main.ts looks like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

我的 app.module.ts 看起来像这样:

And my app.module.ts looks like this:

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屋！