I can't understand why dependencies aren't being loaded. My understanding is that this is a core feature of SystemJS. I've included my systemjs.config.json file below.
systemjs.config.js?v=636221065494454018:162{
"warnings":true,
"paths":{
"lib:":"lib/"
},
"meta":{
"@ngrx/core":{
"exports":"@ngrx/core"
},
"@ngrx/store":{
"exports":"@ngrx/store"
},
"localforage":{
"exports":"localforage"
},
"moment":{
"exports":"moment"
},
"underscore":{
"exports":"underscore"
},
"sortablejs":{
"exports":"sortablejs"
},
"clndr":{
"exports":"clndr",
"format":"global",
"deps":[
"jquery",
"moment"
]
},
"swiper":{
"exports":"swiper",
"format":"global",
"deps":[
"jquery"
]
},
"select2":{
"exports":"select2",
"format":"global",
"deps":[
"jquery"
]
},
"autosize":{
"exports":"autosize",
"format":"global",
"deps":[
"jquery"
]
},
"jquery":{
"exports":"jquery"
},
"jquery.mousewheel":{
"exports":"jquery.mousewheel",
"format":"global",
"deps":[
"jquery"
]
},
"jquery.mCustomScrollbar":{
"exports":"jquery.mCustomScrollbar",
"format":"global",
"deps":[
"jquery"
]
},
"hammerjs":{
"exports":"hammerjs"
},
"wnumb":{
"exports":"wnumb"
},
"clipboard":{
"exports":"clipboard"
},
"materialize-css":{
"exports":"materialize-css",
"format":"global",
"deps":[
"jquery"
]
},
"noUiSlider":{
"exports":"noUiSlider",
"format":"global",
"deps":[
"materialize-css"
]
}
},
"map":{
"@angular":"lib:@angular",
"aot":"aot",
"app":"app",
"rxjs":"lib:rxjs/",
"@ngrx/core":"lib:@ngrx/core/",
"@ngrx/store":"lib:@ngrx/store/",
"localforage":"lib:localforage/",
"moment":"lib:moment/",
"underscore":"lib:underscore/",
"sortablejs":"lib:sortablejs/",
"clndr":"lib:clndr/",
"swiper":"lib:swiper/",
"select2":"lib:select2/",
"autosize":"lib:autosize/",
"jquery":"lib:jquery/",
"jquery.mousewheel":"lib:jquery.mousewheel/",
"jquery.mCustomScrollbar":"lib:jquery.mCustomScrollbar/",
"hammerjs":"lib:hammerjs/",
"wnumb":"lib:wnumb/",
"clipboard":"lib:clipboard/",
"materialize-css":"lib:materialize-css/dist/js",
"noUiSlider":"lib:materialize-css",
"plugin-babel":"lib:babel/plugin-babel.js",
"systemjs-babel-build":"lib:babel/systemjs-babel-browser.js",
"plugin-typescript":"lib:typescript",
"typescript":"lib:typescript"
},
"packages":{
"@angular/http":{
"main":"/bundles/http.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/core":{
"main":"/bundles/core.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/router":{
"main":"/bundles/router.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/common":{
"main":"/bundles/common.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/compiler":{
"main":"/bundles/compiler.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/forms":{
"main":"/bundles/forms.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/platform-browser":{
"main":"/bundles/platform-browser.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/platform-webworker":{
"main":"/bundles/platform-webworker.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/platform-browser-dynamic":{
"main":"/bundles/platform-browser-dynamic.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"@angular/platform-webworker-dynamic":{
"main":"/bundles/platform-webworker-dynamic.umd.js",
"defaultExtension":"js",
"format":"cjs"
},
"aot":{
"defaultExtension":"ts",
"format":"esm",
"meta":{
"*.ts":{
"loader":"plugin-typescript"
}
}
},
"app":{
"defaultExtension":"ts",
"format":"esm",
"meta":{
"*.ts":{
"loader":"plugin-typescript"
}
}
},
"rxjs":{
"defaultExtension":"js",
"format":"esm",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
}
},
"@ngrx/core":{
"defaultExtension":"js",
"main":"index",
"format":"esm",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
}
},
"@ngrx/store":{
"defaultExtension":"js",
"main":"index",
"format":"esm",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
}
},
"localforage":{
"defaultExtension":"js",
"main":"localforage",
"format":"esm",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
}
},
"moment":{
"defaultExtension":"js",
"main":"moment",
"format":"global"
},
"underscore":{
"defaultExtension":"js",
"main":"underscore",
"format":"global"
},
"sortablejs":{
"defaultExtension":"js",
"main":"sortable",
"format":"global"
},
"clndr":{
"defaultExtension":"js",
"main":"clndr",
"format":"global"
},
"swiper":{
"defaultExtension":"js",
"main":"swiper",
"format":"global"
},
"select2":{
"defaultExtension":"js",
"main":"select2.full",
"format":"global"
},
"autosize":{
"defaultExtension":"js",
"main":"autosize",
"format":"global"
},
"jquery":{
"defaultExtension":"js",
"main":"jquery",
"format":"global"
},
"jquery.mousewheel":{
"defaultExtension":"js",
"main":"jquery.mousewheel",
"format":"global"
},
"jquery.mCustomScrollbar":{
"defaultExtension":"js",
"main":"jquery.mCustomScrollbar",
"format":"global"
},
"hammerjs":{
"defaultExtension":"js",
"main":"hammer",
"format":"global"
},
"wnumb":{
"defaultExtension":"js",
"main":"wnumb",
"format":"global"
},
"clipboard":{
"defaultExtension":"js",
"main":"clipboard",
"format":"global"
},
"materialize-css":{
"defaultExtension":"js",
"main":"materialize",
"format":"global"
},
"noUiSlider":{
"defaultExtension":"js",
"main":"noUiSlider",
"format":"global"
},
"plugin-typescript":{
"main":"plugin.js"
},
"typescript":{
"main":"typescript.js",
"meta":{
"typescript.js":{
"exports":"ts"
}
}
}
},
"typescriptOptions":{
"target":"es5",
"module":"es6",
"emitDecoratorMetadata":true,
"experimentalDecorators":true
},
"transpiler":"plugin-typescript"
}
For example, the clndr package isn't loading the moment.js library. It seems like the syntax for declaring dependencies has changed quite a bit over the past year or so... I'm trying to understand what is the proper way to list package dependencies as of systemjs 0.20.5 (released about a week ago).
Any help is appreciated - thanks.
Looks like SystemJS needs the full path in the meta definition. This config is working...
{
"warnings":true,
"map":{
"@angular":"lib:@angular",
"aot":"aot/",
"app":"app/",
"rxjs":"lib:rxjs/",
"@ngrx/core":"lib:@ngrx/core/",
"@ngrx/store":"lib:@ngrx/store/",
"localforage":"lib:localforage/",
"moment":"lib:moment/",
"underscore":"lib:underscore/",
"sortablejs":"lib:sortablejs/",
"clndr":"lib:clndr/",
"swiper":"lib:swiper/",
"select2":"lib:select2/",
"autosize":"lib:autosize/",
"jquery":"lib:jquery/",
"jquery.mousewheel":"lib:jquery.mousewheel/",
"jquery.mCustomScrollbar":"lib:jquery.mCustomScrollbar/",
"hammerjs":"lib:hammerjs/",
"wnumb":"lib:wnumb/",
"clipboard":"lib:clipboard/",
"materialize-css":"lib:materialize-css/dist/js/",
"noUiSlider":"lib:materialize-css/",
"plugin-babel":"lib:babel/plugin-babel.js",
"systemjs-babel-build":"lib:babel/systemjs-babel-browser.js",
"plugin-typescript":"lib:typescript",
"typescript":"lib:typescript"
},
"meta":{
"lib:clndr/clndr.js":{
"deps":[
"moment",
"jquery"
]
},
"lib:swiper/swiper.js":{
"deps":[
"jquery"
]
},
"lib:select2/select2.full.js":{
"deps":[
"jquery"
]
},
"lib:autosize/autosize.js":{
"deps":[
"jquery"
]
},
"lib:jquery.mousewheel/jquery.mousewheel.js":{
"deps":[
"jquery"
]
},
"lib:jquery.mCustomScrollbar/jquery.mCustomScrollbar.js":{
"deps":[
"jquery"
]
},
"lib:materialize-css/dist/js/materialize.js":{
"deps":[
"jquery"
]
},
"lib:materialize-css/noUiSlider.js":{
"deps":[
"materialize-css"
]
}
},
"paths":{
"lib:":"lib/"
},
"depCache":{
"clndr":[
"moment",
"jquery"
],
"swiper":[
"jquery"
],
"select2":[
"jquery"
],
"autosize":[
"jquery"
],
"jquery.mousewheel":[
"jquery"
],
"jquery.mCustomScrollbar":[
"jquery"
],
"materialize-css":[
"jquery"
],
"noUiSlider":[
"materialize-css"
]
},
"packages":{
"@angular/http":{
"main":"/bundles/http.umd.js",
"defaultExtension":"js"
},
"@angular/core":{
"main":"/bundles/core.umd.js",
"defaultExtension":"js"
},
"@angular/router":{
"main":"/bundles/router.umd.js",
"defaultExtension":"js"
},
"@angular/common":{
"main":"/bundles/common.umd.js",
"defaultExtension":"js"
},
"@angular/compiler":{
"main":"/bundles/compiler.umd.js",
"defaultExtension":"js"
},
"@angular/forms":{
"main":"/bundles/forms.umd.js",
"defaultExtension":"js"
},
"@angular/platform-browser":{
"main":"/bundles/platform-browser.umd.js",
"defaultExtension":"js"
},
"@angular/platform-webworker":{
"main":"/bundles/platform-webworker.umd.js",
"defaultExtension":"js"
},
"@angular/platform-browser-dynamic":{
"main":"/bundles/platform-browser-dynamic.umd.js",
"defaultExtension":"js"
},
"@angular/platform-webworker-dynamic":{
"main":"/bundles/platform-webworker-dynamic.umd.js",
"defaultExtension":"js"
},
"aot":{
"defaultExtension":"ts",
"meta":{
}
},
"app":{
"defaultExtension":"ts",
"meta":{
}
},
"rxjs":{
"defaultExtension":"ts",
"meta":{
}
},
"@ngrx/core":{
"defaultExtension":"js",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
},
"main":"index",
"format":"esm"
},
"@ngrx/store":{
"defaultExtension":"js",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
},
"main":"index",
"format":"esm"
},
"localforage":{
"defaultExtension":"js",
"meta":{
"*.js":{
"loader":"plugin-babel"
}
},
"main":"localforage",
"format":"esm"
},
"moment":{
"defaultExtension":"js",
"meta":{
},
"main":"moment",
"format":"global"
},
"underscore":{
"defaultExtension":"js",
"meta":{
},
"main":"underscore",
"format":"global"
},
"sortablejs":{
"defaultExtension":"js",
"meta":{
},
"main":"sortable",
"format":"global"
},
"clndr":{
"defaultExtension":"js",
"meta":{
},
"main":"clndr",
"format":"global"
},
"swiper":{
"defaultExtension":"js",
"meta":{
},
"main":"swiper",
"format":"global"
},
"select2":{
"defaultExtension":"js",
"meta":{
},
"main":"select2.full",
"format":"global"
},
"autosize":{
"defaultExtension":"js",
"meta":{
},
"main":"autosize",
"format":"global"
},
"jquery":{
"defaultExtension":"js",
"meta":{
},
"main":"jquery",
"format":"global"
},
"jquery.mousewheel":{
"defaultExtension":"js",
"meta":{
},
"main":"jquery.mousewheel",
"format":"global"
},
"jquery.mCustomScrollbar":{
"defaultExtension":"js",
"meta":{
},
"main":"jquery.mCustomScrollbar",
"format":"global"
},
"hammerjs":{
"defaultExtension":"js",
"meta":{
},
"main":"hammer",
"format":"global"
},
"wnumb":{
"defaultExtension":"js",
"meta":{
},
"main":"wnumb",
"format":"global"
},
"clipboard":{
"defaultExtension":"js",
"meta":{
},
"main":"clipboard",
"format":"global"
},
"materialize-css":{
"defaultExtension":"js",
"meta":{
},
"main":"materialize",
"format":"global"
},
"noUiSlider":{
"defaultExtension":"js",
"meta":{
},
"main":"noUiSlider",
"format":"global"
},
"plugin-typescript":{
"main":"plugin.js"
},
"typescript":{
"main":"typescript.js",
"meta":{
"typescript.js":{
"exports":"ts"
}
}
}
},
"typescriptOptions":{
"target":"es5",
"module":"es6",
"emitDecoratorMetadata":true,
"experimentalDecorators":true
},
"transpiler":"plugin-typescript"
}
Notice this meta stanza before and after... I do not think the exports and format statements matter here. lib: is defined as paths { 'lib:': 'lib/'}
BEFORE
"clndr":{
"exports":"clndr",
"format":"global",
"deps":[
"jquery",
"moment"
]
},
AFTER
"lib:clndr/clndr.js":{
"deps":[
"moment",
"jquery"
]
},