首页 文章

在Angular 4 SystemJS中插入捆绑的RxJS

提问于
浏览 次
2

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';
angular rxjs systemjs plunker

1 回答

  • 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

    For Angular2 ：我'm not aware if there'是SystemJS 0.20的任何推荐方法，但这已在RxJS GitHub页面上讨论过，因此您可以阅读整个帖子https://github.com/ReactiveX/rxjs/issues/2458 . 特别是从我的评论https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-286706048然后另一个评论，我创建一个自定义AMD捆绑，这很简单，并与SystemJS 0.20以及https://github.com/ReactiveX/rxjs/issues/2458#issuecomment-287193937一起使用 .

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

    For 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

    回复于

相关问题