Last active
February 24, 2018 18:29
-
-
Save nros/311962c6e0ffb67b4e6aada67e1821f0 to your computer and use it in GitHub Desktop.
SystemJS: custom loader to help Angular 2 to `require()` parts of RxJS if these parts have already been loaded with a single file (eg: `Rx.js`)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
SystemJS.config({ | |
baseURL: '/', | |
map: { | |
"rxjs": "Rx.js" | |
}, | |
paths: { | |
"Rx.js/*": "rxjs-parts/*" | |
}, | |
packages: { | |
"rxjs-parts": { | |
meta: { | |
"*": { | |
loader: "rxjsLoader" | |
} | |
} | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I had to change
loader: "rxjsLoader.js"
(note the .js) thanks for this btw its a bit good!!