Question

Official Angular 4 plunk有一个常见的问题，因为它会加载非捆绑的RxJS并且经常会对请求发送到unpkg.com

可以修改SystemJS配置以在捆绑的Angular模块中使用捆绑的RxJS吗？

  map: {
    ...
    'rxjs': 'npm:rxjs/bundles/Rx.js'
  },
  packages: {
    ...
    rxjs: {
      defaultExtension: 'js'
    }
  }

效果不佳并导致404错误：

unpkg.com/rxjs@5.4.3/bundles/Rx.js/operator/share.js:1

获取https://unpkg.com/rxjs@5.4.3/bundles/Rx.js/operator/share.js 404（）

因为Angular捆绑模块包含以下导入：

import {Observable} from 'rxjs/Observable';
import {of } from 'rxjs/observable/of';
import {concatMap} from 'rxjs/operator/concatMap';
import {filter} from 'rxjs/operator/filter';
import {map} from 'rxjs/operator/map';

Answer 1

一种简单的方法是从rxjs中移除map并将其rxjs*添加到path中（我认为您需要在此处使用绝对路径）：

paths: {
  'rxjs*': 'https://unpkg.com/rxjs@5.4.3/bundles/Rx.min.js'
},

但这仅适用于SystemJS 0.19。*，因为从0.20开始不再支持通配符*，请参阅：https://github.com/systemjs/systemjs/issues/1039

对于Angular2 ：我不知道是否有任何推荐的SystemJS 0.20方法，但这已在RxJS GitHub页面上讨论过，因此您可以阅读整个帖子{{ 3}}。特别是从我的评论https://github.com/ReactiveX/rxjs/issues/2458然后另一条评论中我创建了一个非常简单的自定义AMD软件包，并且与SystemJS 0.20以及https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-286706048一起使用。

编辑：显然现在这只适用于Angular2而不适用于Angular4：https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-287193937

对于Angular4 ，我发现的简单方法是创建一个新的文件，用于填充缺少的导出（参见下面的评论）：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import 'rxjs/add/observable/merge';

export function merge(...observables: Observable[]) {
  return Observable.merge(observables);
}

export function share(observable: Observable) {
  if (!observable) {
    return;
  }
  return observable.share();
}

然后加载此文件而不是捆绑的RxJS：

paths: {
  'npm:': 'https://unpkg.com/',
  'rxjs/observable/merge': './src/rxjs-polyfill.ts',
  'rxjs/operator/share': './src/rxjs-polyfill.ts',
  'rxjs*': 'https://unpkg.com/rxjs@5.4.3/bundles/Rx.min.js'
},

使用Angular4进行演示：https://plnkr.co/edit/ddRnL2I4ps2U2pdoRo04?p=info

在Angular 4 SystemJS中插入捆绑的RxJS

1 个答案: