如何在Angular 2中将rxjs加载为一个文件?

时间:2017-02-03 13:25:10

标签: angular rxjs systemjs

我有Angular 2 app。

systemjs.config.js:

 System.config({
        paths: {
            'npm:': "libs/"
        },
        map: {
            'rxjs': "npm:rxjs"
        }
    });

组件:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
    selector: 'test',
    templateUrl: './app/test.component.html'
})
export class TestComponent implements OnInit {
    constructor(...) { }

    ngOnInit() { ... }
}

并将“ node_modules / rxjs ”中的所有js文件复制到“libs”文件夹。

我在浏览器控制台中看到来自 rxjs 的约100个请求(merge.js,fromEvent.js,toPromise.js,...)

如果我更改了systemjs.config.js:

'rxjs': "npm:rxjs/bundles/Rx.min.js"

我看到错误,就像那样:

localhost/libs/rxjs/bundles/Rx.min.js/operator/toPromise.js Failed to load resource: the server responded with a status of 404 (Not Found)

如果我只使用 node_modules / rxjs / bundles / Rx.min.js ,是否可以帮助我提高性能?

我应该怎么做才能使用该单个文件?

1 个答案:

答案 0 :(得分:0)

在项目中使用RxJS时,此SystemJS配置应该正常工作。

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',

    /* ... */

    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
  // Thirdparty barrels.
    'rxjs': {
      main: 'index'
    },
  }
});