Sharing Angular 1.x modules as a JSPM bundle

[Nathan Friend]

Question about bundling.  I'm trying to share a set of Angular 1.x modules as a single JSPM package that other Angular 1.x apps can consume.  Here's what I'm trying to do: given a file structure like this:

root/

├── src

│   ├── my-module

│   │   └── my-service.js

│   ├── my-other-module

│   │   └── my-other-service.js

│   └── bootstrap.js

├── jspm_packages

├── config.js

├── index.html

└── package.json

How can I bundle my-module and my-other-module into a single file that will allow me to consume the contents of the bundle in another application like this?

import * as MyService from 'mybundle/my-module/my-service';

import * as MyOtherService from 'mybundle/my-other-module/my-other-service';

assuming I've dropped this bundle into my consuming app at thirdparty/my-bundle.js and added this to my consuming app's config.js:

map: {

    "my-bundle": "third-party/my-bundle.js"

}

This is what I've tried (using the systemjs-builder npm package):

builder.bundle('[src/**/*]', 'dist/my-bundle.js');

This successfully creates a bundle with all the src/ files inside.  However, when I try and use the bundle (like in the example above),  SystemJS tries to make a call to http://localhost/third-party/my-bundle/my-module/my-service.js, which results in a 404.  Instead, I imagine SystemJS should be making a call to  http://localhost/third-party/my-bundle.js and use the ./my-module/my-service module defined within that file.

Is there a way I can bundle my Angular modules so that I can consume them in the way I'm expecting?  Or is there a better way to package Angular 1.x modules for use as a JSPM module?

[Nathan Friend]

Quick correction: the example config.js should be:

map: {

    "mybundle": "third-party/my-bundle.js"

}

(no - in mybundle)

[Guy Bedford]

It's an easy assumption to make, but bundles are not a distribution format for modules.

Bundles are only a multiplexing optimization for existing configuration, and assume that the target environment will have the same configuration present.

Perhaps create a build of your service that contains external dependencies on angular, with eg (in jspm 0.17):

jspm build mymodule/my-service.js --format amd --externals angular ...etc...

Then you have a "module" that can be shared with other apps. Modules are sharable... bundles aren't.

Hope that makes sense.

--
You received this message because you are subscribed to the Google Groups "jspm" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspm-io+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nathan Friend]

Thanks, Guy.  Thanks makes a lot of sense.