Angularjs 来自unpkg的rxjs束

我有一个angular 2.0.0（与2.2.0中的问题相同）项目。当前的开发版本生成>100个http请求

这是因为它加载了rxjs的非捆绑版本

当我有以下情况时：

    map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        // snip
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },

该应用程序可以工作，但我们有1000多个http请求，所以我尝试从捆绑包中加载rxjs，为此我删除了

rxjs'：'npm:rxjs'

，并添加了以下内容

注：对于两个npm：来自UNPGG的荷载

    paths: {
        // paths serve as alias
        'npm:': 'https://unpkg.com/',
        'rxjs/*': 'https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js'
    },

ReactiveX git页面建议此包应该可以工作，还是缺少其他内容

我在第二个配置中遇到以下错误

Uncaught (in promise): TypeError: Cannot read property 'call' of undefined

---

我有一个plnkr.io演示，用于在TypeScript中摆弄RxJS，它像您一样加载捆绑的verison

见：

重要的部分是

System.config

：

System.config({
  transpiler: 'typescript',
  map: {
    'rxjs': 'https://unpkg.com/@reactivex/rxjs@5.0.0-beta.12/dist/global/Rx.js'
  }
});

然后从捆绑包中导入任何内容，只需：

import {BehaviorSubject} from 'rxjs';

编辑：

默认Angular2演示已更新为加载单个

Rx.js

。 现场观看：

在

systemjs.config.js

中，我完全删除了

rxjs

表单

map

并添加到

路径中：

'rxjs*': 'https://unpkg.com/@reactivex/rxjs@5.0.0-beta.12/dist/global/Rx.js'

然后我用它来举例：

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent {

  constructor() {
    console.log(BehaviorSubject);
  }

}

从'@angular/core'导入{Component}；
从“rxjs”导入{BehaviorSubject}；
@组成部分({
选择器：“我的应用程序”，
模板：“我的第一个角度应用”
})
导出类AppComponent{
构造函数（）{
console.log（行为主体）；
}
}
我们将详细讨论此问题，解决方案是使用您自己的加载程序，例如（code credit）

显然，它将在未来的版本中得到修复，我怀疑这会被推迟，因为rxjs仍处于测试阶段

rxjsLoader.js

// see: https://github.com/angular/angular/issues/9359
// in case all parts of RxJS are loaded with a single file (eg: Rx.js), Angular 2 may have
// difficulties using/requiring the various parts.
// this custom loader translates requests to these parts to the already loaded Rx entity.
//
// eg: Angular:
//      require('rxjs/observable/from')  -->  Rx.Observable
//      require('rxjs/operator/concatMap')  -->  Rx.Observable.prototype
//      require('rxjs/util/EmptyError')  -->  Rx
//
// Angular will access 'rxjs/observable/from' as rxjs_observable_from.from
// so, the last part of the included module (eg: 'from') denotes the property name to access
// the required value.
SystemJS.amdDefine(SystemJS.baseURL + "rxjsLoader.js", ["rxjs"], function (Rx) {
    'use strict';

    // custom loader for RX.js to instantiate the correct value
    // see: https://github.com/ModuleLoader/es-module-loader/blob/v0.17.0/docs/loader-extensions.md
    return {
        fetch: function fetch(loadData) {
            return ""; // no fetch - "Rx" is already loaded!
        },

        translate: function translate(loadData) {
            return "";
        },

        instantiate: function instantiate(loadData) {

            // loadData.name contains the full URL
            var propertyName = loadData.name.replace(/^.*\/rxjs-parts\/(.*)$/i, "$1").replace(/\.js$/i, "");

            // if property name is not empty, evaluate and use it
            if (propertyName.length > 0 && !(/^\s*$/.test(propertyName))) {
                var parts = propertyName.split("/"),
                    targetObject = Rx
                ;

                // Angular 2 expects the return value to be an object
                // and the last part of the name to be the property of that object

                for (var i=0; i < parts.length-1; i++) {
                     var partName = parts[i],
                         upperCaseName = partName.charAt(0).toUpperCase() + partName.slice(1)
                     ;

                     // handle special case for "operator/*"
                     if (partName === "operator") {
                         return Rx.Observable.prototype;

                     } else if (targetObject[partName] !== undefined) {
                         targetObject = targetObject[partName];

                     } else if (targetObject[upperCaseName] !== undefined) {
                         targetObject = targetObject[upperCaseName];

                     } else {
                         // skip name and try with next part name. eg: "utils"
                         continue;
                     }
                }

                return targetObject;

            } else {
                // return the Rx as default
                return Rx;
            }
        }
    };
});

SystemJS.config({

    baseURL: '/',

    map: {
        "rxjs": "Rx.js"
    },
    paths: {
        "Rx.js/*": "rxjs-parts/*"
    },
    packages: {
       "rxjs-parts": {
            meta: {
                "*": {
                    loader: "rxjsLoader.js"
                }
            }
        }
    }
});

它仍然在尝试从等加载东西…除了rxjs，我没有其他参考，例如没有导入（我将它们取出作为调查的一部分）我猜Angular2的一些东西正在加载它们？？？我用捆绑的
rx.js
更新了Angular2演示版的答案，谢谢，这非常有用..但是，我仍然无法让我的工作..我尝试过向你的plunk添加HTTP之类的东西，我一直在缓慢地添加位，但plunk一直在工作（虽然我现在得到了一个奇怪的错误，但它仍然有效，plunk现在速度有点慢，所以很难继续进行。我正在使用Visual Studio，我正在编译TS，而我的fork是在我们会的，因为我的plnkr工作，那么你的代码中一定有什么东西…@SteveDrake他们在谈论
umd
包，我和你正在使用globals

，这是

窗口。随便什么…

。