Loading google api

[VictorQueiroz]

In RequireJS we use the 'async' plugin to load Google Maps JavaScript API. How we're supposed to do this with SystemJS? And what about Facebook JS SDK?

[guybedford]

One issue here is having SystemJS support arbitrary URLs (which will be supported in future). You can do this via paths:

System.paths['google-maps'] = 'http://api.google.com/.../maps.js';

It does depend also on whether the underlying library supports being loaded this way though.

[guybedford]

Note direct URL importing will be supported in the next release.

Closing, but let me know if you have any further questions.

[VictorQueiroz]

What if I want to load a package like https://github.com/ajaxorg/ace?

[guybedford]

It is a bit of config to set this up unfortunately, but it is possible. There's a jspm thread on loading Ace at jspm/registry#38, but the configurations should also apply to SystemJS on its own.

[VictorQueiroz]

Can I use bower with systemjs or jspm is the most recomendable package manager to use?

[guybedford]

You can certainly use Bower with SystemJS. A configuration might look like:

System.config({
  paths: {
    'packages/*': 'bower_components/*.js'
  },
  meta: {
    'packages/jquery/jquery.js': {
      format: 'global' // configuring shims etc
    }
  }
});

[migajek]

Has anyone figured it yet how to load google maps?
I'm getting No 'Access-Control-Allow-Origin' header is present on the requested resource

[guybedford]

@migajek you can add metadata to inform the load that it is a global with exports, and then SystemJS will know to use <script> injection which is CSP-compatible:

System.config({
  meta: {
    '//path/to/maps.js': {
      exports: 'google.map' // or whatever this is
      format: 'global'
    }
  }
});

[migajek]

@guybedford is that a tested solution? I'm getting "It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened." exception under Chrome and it doesn't seem to be loaded ...

here's my configuration

meta: {
'http://maps.googleapis.com/maps/api/js?': {
      exports: 'google.map', // or whatever this is
      format: 'global'
    }
}

and usage

import 'http://maps.googleapis.com/maps/api/js?';

[guybedford]

@migajek I believe you need to set the callback option when loading the API to ensure it doesn't use document.write. Then you need that callback to trigger the load event for the module.

There was this plugin for AMD which basically did that by writing the load callback as the global passed into the callback, which could be made into a SystemJS plugin - https://github.com/millermedeiros/requirejs-plugins/blob/master/src/async.js.

[HeinrichFilter]

@migajek I also struggled with this and ended up writing the SystemJS plugin, as suggested. You can find it here:
https://github.com/HeinrichFilter/systemjs-plugin-googlemaps

@guybedford If you have time, could you please have a look and see if that is more or less what you would expect in the plugin?

[guybedford]

@HeinrichFilter that looks great to me.

[Ken-vdE]

+1 same issue

[RobinBuschmann]

The following solution works for me (without using any plugin):

paths: {
    "google-maps": "https://maps.googleapis.com/maps/api/js"
 },
packages: {
    "https://maps.googleapis.com": {
      defaultExtension: false,
      "meta": {
        "*": {
          scriptLoad: true,
          exports: 'google'
        }
      }
    }
  },

But unfortunately both the plugin solution (https://github.com/HeinrichFilter/systemjs-plugin-googlemaps) and the native solution will not work for creating a self executing bundle via jspms bundle-sfx. Any suggestions?

[nickspiel]

@RobinBuschmann how did you know to do that? How does this method change the behaviour of SystemJS to get around the Access-Control-Allow-Origin policy? Maybe @guybedford can shed some light?

[RobinBuschmann]

@nickspiel What exactly do you want to know? The scriptLoad property comes from the docs. About the cors issue there is nothing I can say but that it is working with my configuration... As you already said maybe guybedford can give you more insights about the why.

[nickspiel]

scriptLoad: Load the module using script tag injection. Well that makes sense, that means the script is no longer loaded through XHR right? Took a little to find that gem in the docs.

[RobinBuschmann]

@nickspiel That's correct, that's what the docs say and that's what it does.

[RobinBuschmann]

Ah, and that's what you meant with "How does this method change the behaviour...". I didn't get it at first, sry..