Using SystemJS, how do I specify that one library depends on another? For example, the Bootstrap JavaScript library depends on jQuery. Based on the SytemJS docs, I assumed I would specify this dependency using System.config.meta
property:
System.config({
baseUrl: './scripts',
defaultJSExtensions: true,
map: {
jquery: './lib/jquery-2.2.0.min.js',
bootstrap: './lib/bootstrap.min.js'
},
meta: {
bootstrap: {
deps: ['jquery']
}
}
});
System.import('./scripts/app.js');
But this seems to have no effect. When I run my application, the Bootstrap library throws a Bootstrap's JavaScript requires jQuery
error - which means Bootstrap is being loaded before jQuery.
How can I ensure that jQuery is always loaded before Bootstrap?
SystemJS works client side. It loads modules (files) dynamically on demand when they are needed. You don't have to load the entire app up front. You could load a file, for example, inside a button click handler.
SystemJS is a module loader that can import modules at run time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). It is built on top of the ES6 module loader polyfill and is smart enough to detect the format being used and handle it appropriately.
The systemjs.config.js defines configuration for Path Normalization in SystemJS. You load something using SystemJS like this: System.import('app/main.js')
Now systemjs understands that it needs to resolve and load @angular/core . It first goes through the process of checking mappings , as specified in the docs: The map option is similar to paths, but acts very early in the normalization process. It allows you to map a module alias to a location or package.
After blindly changing things, I happened upon a configuration that seems to work. Here's my config:
System.config({
defaultJSExtensions: true,
paths: {
jquery: './scripts/lib/jquery-2.2.0.min.js',
bootstrap: './scripts/lib/bootstrap.min.js'
},
meta: {
bootstrap: {
deps: ['jquery']
}
}
});
System.import('./scripts/app.js');
I think the key was changing from map
to paths
.
EDIT
Side note: after learning a bit more about SystemJS, I'm discovering that it is much easier to let jspm do the hard work of managing my SystemJS configuration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With