Skip to content

Instantly share code, notes, and snippets.

@nros
Last active February 24, 2018 18:29
Show Gist options
  • Save nros/311962c6e0ffb67b4e6aada67e1821f0 to your computer and use it in GitHub Desktop.
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`)
// 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"
}
}
}
}
});
@SteveDrakey
Copy link

I had to change loader: "rxjsLoader.js" (note the .js) thanks for this btw its a bit good!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment