Question

我目前正在更新我的项目的依赖项，该项目使用Angular2 npm软件包，因此也使用RxJs。我正在更新到2.0.2稳定版的角度，这取决于Rx5 beta.12。对于我的Web应用程序，我只部署Rx.min.js包并在index.html文件中加载脚本标记。这种方法在使用Rx umd包之前完美地工作，但同时会导致错误，因为在我看来，RxJ的贡献者为了一个公共包文件而放弃了不同的包版本。即Rx.js而不是Rx.umd.js等等。

我正在使用SystemJs模块加载器，如果我没有其他步骤，这些错误将发生在RxJs框架的任何符号上：

GET http://localhost:8080/rxjs/Subject.js 404 (Not Found)

我认识到Rx现在是全局定义的（window.Rx）并包含所有必需的东西。所以我尝试通过像这样的smth手动定义SystemJs中的那些符号：

function defineGlobalModule( parentModuleName, simpleName, moduleValue ) {
  var fqModuleName = parentModuleName + simpleName;
  System.amdDefine( fqModuleName, ["require", "exports"], function (require, exports) {
       "use strict";
       exports[ simpleName ] = moduleValue;
  }); 

  if( typeof moduleValue === "object" )
     for( var key in moduleValue )
       defineGlobalModule( fqModuleName + "/", key, moduleValue[ key ] )
}

defineGlobalModule( "", "rxjs", global.Rx );

这使'rxjs / Subject'样式导入再次起作用。但现在我收到很多这样的错误：

GET http://localhost:8080/rxjs/operator/toPromise.js 404 (Not Found)
GET http://localhost:8080/rxjs/observable/fromPromise.js 404 (Not Found)

这些文件由angular forms.umd.js包导入，例如。

在不部署node_module本身的情况下导入Rx.js 软件包时，Angular2 2.0.x的最新技术水平是什么。我需要捆绑版！我正在使用之前的rx.js软件包的umd版本似乎不再存在。

Answer 1

我可能正是您正在寻找的Angular2和rxjs@5.0.0-beta.12，现在已经分发为globals，umd包可能不再受支持了（就像你说的那样）：

查看现场演示：https://plnkr.co/edit/z4gg2XBoQDgYXev0Csuq

基本上，我刚刚更新了我的SystemJS配置：

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

然后我从rxjs列表中删除了map。现在它加载了一个Rx.js文件。

Answer 2

一旦我开始使用routing的其他位，例如// 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" } } } } });加载导致问题。

详细讨论了这个问题here，解决方案是使用您自己的加载程序，例如（代码信用nros）

显然，它将在未来版本中修复，我怀疑这是因为rxjs仍处于测试阶段而被阻止。

<强> rxjsLoader.js

{{1}}

<强> systemjs-CONFIG-使用定制-RX-loader.js

{{1}}

Angular2 2.0.x和Rx 5 beta.12捆绑

2 个答案: