SystemJS compatibility

[IEvangelist]

In looking at the systemjs.config.js from the Quickstart, we see how to reference packages via map and packages from the SystemJS config API. For all of the scoped @angular packages this works swimmingly. However, I cannot get ng2-idle or ng2-idle-keepalive to properly be referenced. What am I doing wrong?

Here is my wwwroot/js folder hierarchy:

js
|   bootstrap.js
|   bootstrap.min.js
|   jquery.js
|   jquery.min.js
|   jquery.scrollbar.js
|   jquery.scrollbar.min.js
|   Reflect.js
|   Reflect.min.js
|   system.src.js
|   system.src.min.js
|   zone.js
|   zone.min.js
+---@angular
|   +---common
|   |   \---bundles
|   |           common.umd.js
|   |           common.umd.min.js
|   +---compiler
|   |   \---bundles
|   |           compiler.umd.js
|   |           compiler.umd.min.js
|   +---core
|   |   \---bundles
|   |           core.umd.js
|   |           core.umd.min.js
|   +---forms
|   |   \---bundles
|   |           forms.umd.js
|   |           forms.umd.min.js
|   +---http
|   |   \---bundles
|   |           http.umd.js
|   |           http.umd.min.js
|   +---platform-browser
|   |   \---bundles
|   |           platform-browser.umd.js
|   |           platform-browser.umd.min.js
|   +---platform-browser-dynamic
|   |   \---bundles
|   |           platform-browser-dynamic.umd.js
|   |           platform-browser-dynamic.umd.min.js
|   +---router
|   |   \---bundles
|   |           router.umd.js
|   |           router.umd.min.js
|   +---router-deprecated
|   |   \---bundles
|   |           router-deprecated.umd.js
|   |           router-deprecated.umd.min.js
|   \---upgrade
|       \---bundles
|               upgrade.umd.js
|               upgrade.umd.min.js
+---ng2-ext
|       angular2localization.umd.js
|       angular2localization.umd.min.js
|       ng2-bs3-modal.js
|       ng2-bs3-modal.min.js
|       ng2-idle-keepalive.js
|       ng2-idle-keepalive.min.js
|       ng2-idle.js
|       ng2-idle.min.js
\---rxjs
    \---bundles
            Rx.umd.js
            Rx.umd.min.js

Here is my systemjs.config.js:

(function (global) {

    var packages = {
        'ng2-idle/core': { defaultExtension: 'js' },
        'ng2-idle-keepalive/core': { defaultExtension: 'js' },
        'ng2-bs3-modal/ng2-bs3-modal': { defaultExtension: 'js' }
    };

    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];

    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { 
            main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'
        };
    });

    System.config({
        defaultJSExtensions: true,
        paths: {
            'rxjs/*': 'js/rxjs/bundles/Rx.umd.min.js',
            'angular2localization/*': 'js/ng2-ext/angular2localization.umd.min.js'
        },
        map: {
            'app': 'app/shell',
            '@angular': 'js/@angular',
            'ng2-idle': 'js/ng2-ext',
            'ng2-idle-keepalive': 'js/ng2-ext',
            'ng2-bs3-modal': 'js/ng2-ext'
        },
        packages: packages
    });

})(this);

When the files are requested by the client module loader, they return happily but then references to any objects of these from import statements are undefined?

Keep in mind that I have tried all sorts of alternative ways of referencing these packages, including but not limited to paths, implicit versus explicit main reference in packages, implicit versus explicit .js file in map, etc...

[IEvangelist]

In looking at this more closely, it might have something to do with me attempting to use the bundle *.umd.js?

In fact, I just changed my systemjs.config.js to use the non-bundled approach and it works. :cry:

Perhaps, the bundling is the issue.

[moribvndvs]

JavaScript bundling/loader fatigue is real. I'll try working through the Quickstart and see if I can shake this loose.

[patrickracicot]

@IEvangelist How I got it to work is to impour the min of ng2-idle in my index.html. Then for the map configuration I add ng2-idle like this: 'ng2-idle': 'node_modules/ng2-idle' Finally in the packages configuration I add ng2-idle like this: 'ng2-idle': { main: 'index.js', defaultExtension: 'js' }

[mdsauer]

Using the alpha 18 I am getting "Cannot read property 'forRoot' of undefined(…)" on the Ng2IdleModule. I am trying to add ng2-idle to the quickstart project. I followed @patrickracicot but I get the error with or without including the min in my index.html.

[moribvndvs]

I've refactored this module heavily. I've switched to providing a UMD bundle (as well as plain old ES5 source) in the package. That will hopefully sort this problem. Please refer to the README and CHANGELOG for more information.