systemjs - Loading jquery

Question

Can someone tell me how to load a simple javascript file into the browser using SystemJS.

I am trying to load in jquery from my node_modules folder using the following syntax-:

packages: {
      app: {
        main: './js/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
        'jquery': {
        main: 'node_modules/jquery/dist/jquery.min.js'
    }
    }

But whenever I write the following lines in my browser

$(document).ready(function(){alert("Hello");});

My entire SystemJS configuration is -:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'jquery':                    'npm:jquery/dist/jquery.min.js',      
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './js/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

I get an error that $ is not defined.

How do you load a simple .js file into an the browser using SystemJS ?

Answer 1

This behavior is both correct and expected because jQuery, being a well written, environment friendly library does not unconditionally inject itself into the global namespace, window in a browser if a suitable loader is available. SystemJS detects that jQuery is an AMD module and provides the correct wrappers for it to register itself properly using the AMD define api.

This means that you need to import it in order to use it.

The following code will work under TypeScript and Babel

import $ from 'jquery';

$(document).ready(() => {
  alert("Hello");
});

If you want access to jquery in your browser console. You can do the following

// In your browser tools console
SystemJS.import('jquery').then(({default}) => { 
  window.$ = default;
});