在 Angular 4 SystemJS plunk 中捆绑了 RxJS

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

GET 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

一种简单的方法是从 map 中删除 rxjs 并将其作为 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 页面上讨论过，所以你可以阅读整个线程 https://github.com/ReactiveX/rxjs/issues/2458. In particular from my comment https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-286706048 and then another comment where I create a custom AMD bundle which is pretty simple to do and works with SystemJS 0.20 as well https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-287193937.

编辑： 所以显然这现在只适用于 Angular2 而不是 Angular4：https://plnkr.co/edit/ddRnL2I4ps2U2pdoRo04?p=info

对于 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 工作演示：http://plnkr.co/edit/tu561CX0n1I9f53iVv12

在 Angular 4 SystemJS plunk 中捆绑了 RxJS

Bundled RxJS in Angular 4 SystemJS plunk

rxjs

plunker

systemjs

angular