SystemJS Dojo Loader

systemjs.loader.dojo.js

exports.fetch = function(load) {
    var name = load.name;
    return new Promise(function(resolve) {
        var dojoName = convertToDojoModule(name);
        window.require([dojoName], function(mod) {
            SystemJS.register(dojoName, [], function (exp, idObj) {
                return {
                    setters: [],
                    execute: function() {
                        exp("default", mod);
                    }
                };
            });
            resolve('');
        });
    });
};

exports.instantiate = function (load) {
    var name = load.name.split('!')[0];
    var dojoName = convertToDojoModule(name);
    return new Promise(function (resolve) {
        // Since module is loaded by fetch, just require it again,
        // dojo require does not load the module again.
        window.require([dojoName], function (module) {
            resolve(module);
        });
    });
};

function convertToDojoModule(module) {
    // we just replace SystemJS.baseURL with '';
    return module.replace(SystemJS.baseURL, '');
}

To use this loader:

First is a dojoConfig.js:

(function (global) {
    'use strict';
    global.dojoConfig = {
        async: true,
        baseUrl: '.',
        packages: [
            { name: 'dgrid', location: 'bower_components/dgrid' },
            { name: 'dijit', location: 'bower_components/dijit' },
            { name: 'dojo', location: 'bower_components/dojo' },
            { name: 'dojox', location: 'bower_components/dojox' },
            { name: 'dstore', location: 'bower_components/dstore' },
            { name: 'moment', location: 'bower_components/moment' },
            { name: 'esri', location: 'bower_components/esri' }
        ]
    };
})(window);

and include dojo/dojo.js into your html file:

<script src="dojoConfig.js"></script>
<script src="bower_components/dojo/dojo.js"></script>

Then, add a meta config to systemjs.config.js:

System.JS.config({
    /* other angular related config */
    meta: {
      'esri/*': { loader: 'systemjs.loader.dojo.js' }
    }
});

There a working example: https://github.com/beginor/ng2-esri-demo

@beginor

this is great! I would recommend that you make this it's own repository to make it easy for others to contribute and to publish it to npm so it can be installed via npm, jspm, etc. The SystemJS plugin docs don't really give much guidance on publishing a plugin, but the CSS plugin repository looks like it could be used as an example.

@tomwayson That sounds a good idea, I will build a public repo for this loader.