javascript - Loading TypeScript module with submodules in SystemJS -

how load modules systemjs if generated typescript single file containing several sub modules?

currently, have larger library named form build in single file containing multiple sub-modules (like packages). generate library file use tsconfig:

{   "compileroptions": {     "target": "es5",     "module": "system",     "moduleresolution": "node",     "noresolve": true,     "outfile": "../dist/lib/form.js",     "declaration": true,     "removecomments": false,     "noimplicitany": true   },   "exclude": [     "lib",     "node_modules"   ],   "filesglob": [     "**/*.ts"   ] } 

as result, form.js file contains modules, contain classes , on.

now want use generated library inside project named shop. every time try use classes sub-modules, systemjs tries load submodules subdirectory instead library itself.

for example:

import {version}       'form';            // loaded 'form.js' import {observableset} 'form/collection'; // loaded 'form/collection.js' import {button}        'form/ui/control'; // loaded 'form/ui/control.js' 

but want load of them form.js, because 'form/collection' , 'form/ui/control' modules defined within form.js. files form/collection.js , 'form/ui/control.js' don't exist.

so, how modify following configuration systemjs, load 3 classes form.js?

system.config({     baseurl: '.',     defaultextension: 'js',     paths: {         '*': '*.js'     },     map: {         'form':       'lib/form',         'shop':       'lib/shop',         'is':         'lib/is',         'jquery':     'lib/jquery-2.1.4'     } });  system.import('shop'); 

directory layout:

/lib/form.js         (the module file, containing multiple modules) /lib/shop.js         (the application) /lib/... /config.js           (config systemjs, shown) /index.html 

i missed systemjs has bundles option. following addition lets systemjs know modules should loaded after loading 'form' module, provides mentioned modules, won't attempt loading them different file.

bundles: {   'form': ['form/collection', 'form/ui/control'] } 

notice 1: make sure bundle has not same name 1 of imported modules. results in naming conflict. following example cause trouble, because form used twice, naming bundle module inside bundle:

bundles: {   'form': ['form', 'form/something'] } 

notice 2: systemjs supports wildcards in bundles. aren't deep. means form/* add module form/collection, won't add form/ui/control. add every module under form/ui needs additional entry form/ui/*.

example:

bundles: {   'form': ['form/*', 'form/ui/*'] }