I am trying to require bootstrap-datepicker plugin with localization.
In my module I have dependency:
define(
['bootstrap-datepicker-ru'],
function(){}
)
...
In RequireJ config I set path:
paths: {
'bootstrap-datepicker-ru': 'libs/bootstrap-datepicker/bootstrap-datepicker.ru',
...
}
And shim:
shim: {
'bootstrap-datepicker-ru':{
deps: ['libs/bootstrap-datepicker/bootstrap-datepicker'],
},
...
}
So I expect that the bootstrap-datepicker.js file will be loaded first, since it is listed in the dependencies (deps), and then the bootstrap-datepicker.ru.js.
But I get the following error:
Cannot read property 'dates' of undefined bootstrap-datepicker.ru.js
I don't understand why I got this error. At the time assignment $.fn.datepicker.dates in localization file, $.fn.datepicker.dates must already exist.
Related
I am not able to use ngResource using require.js I am having exactly same problem as discussed here
Below is my code :
main.js ( data-main attribute of require.js )
// https://groups.google.com/forum/#!topic/angular/I6CSeG0Z2Vo
require.config({
paths: {
'angular': '../bower_components/angular/angular',
'angularResource': '../node_modules/angular-resource/angular-resource'
},
shim:{
'angular':{
exports: 'angular'
},
'angularResource':{
deps: ['angular'],
exports: 'angularResource'
}
}
});
debugger;
require(['controllers/MainCtrl']);
require(['directives/owNavigation']);
require(['directives/owFooter']);
Below is my app.js where I am creating my angular app module.
app.js
define(['angular','angularResource'],function(angular,angularResource){
debugger;
var app = angular.module('app',['ngResource']);
return {
angularModule: app
}
});
But, 'angularResouce' parameter is always null. I can see 'angular' parameter has proper value and I can create my 'app' module without passing 'ngResource' as a dependency.
I am using below version
Angularjs v1.6.6
RequireJS 2.3.5
angular-resource v1.6.6
I can see in chrome developer tool's network tab that requirejs is loading file 'angular-resource.js' but still app.js module is not receiving it as a parameter.
Here is the error that can be seen on console
Delete export from the shim angularResource :
shim:{
'angular':{
exports: 'angular'
},
'angularResource':{
deps: ['angular']
}
}
It should work (working for me), keeping everything else same.
I am having trouble understanding about requirejs.config() function.
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
What does the function do? Please do not direct me to the documentation because I have read it and still found it confusing. I need a simple explanation on what this function does.
Are these scripts loaded asynchronously?
It creates aliases for script paths ant tells how to interpret bootstrap (non-AMD script) when loaded. Nothing is loaded yet. You have to require:
// we load two dependencies here
// `knockout` and `bootstrap` are expanded to values in config
// .js added to values
// callback function called when all dependencies are loaded
require(['knockout', 'bootstap'], function(Knockout, $) {
// jQuery is passed to this function as a second parameter
// as defined in shim config exports
});
The path is like declarations/definitions. So for example,
jquery: '../bower_components/jquery/dist/jquery',
you can later load this lib as follows.
define([
'jquery'
], function (jquery) {
//initialize or do something with jquery
}
You don't have to specify the absolute path of the library.
In shim, you will define dependencies. So for example,
paths: {
template: '../templates',
text: '../bower_components/requirejs-text/text',
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
Router: 'routes/router'
},
shim: {
'backbone': ['underscore', 'jquery'],
'App': ['backbone']
}
Here backbone is dependent on underscore and jquery. So those two libs will be loaded before backbone starts loading. Similarly App will be loaded after backbone is loaded.
You might find this repo useful if you are familiar with backbone and express.
https://github.com/sohel-rana/backbone-express-boilerplate
I've compiled my requirejs file using r.js and occasionally on page load, modules aren't defined as (I'm assuming) that require and define calls are running asynchronously and modules aren't getting defined by the time the require call has executed.
I'm pretty sure my shim is correct, my waitSeconds is set to 0 (infinite) and all my exports are set up.
Here's my (shortened) requirejs file:
requirejs.config({
defaultPath: 'javascript',
waitSeconds: 0,
// paths to plugins
paths : {
'jquery' : 'plugins/jquery-1.9.1.min',
'owl' : 'plugins/owl.carousel.min'
},
// dependency order if applicable
shim : {
'jquery' : {
exports: '$'
},
'owl' : {
deps: ['jquery'],
exports: 'owlCarousel'
}
}
});
require(['jquery','owl'], function($, owlCarousel){
$('.carousel').owlCarousel();
});
20% of the time, the scripts fail loading while using RequireJS.
The additional files that I am using throu the application require, besides the JS libraries, the base.js file, which contains configurations and some setup for underscore & backbone. Without these settings, the other files won't work.
The script tag in the is the following:
<script data-main="http://*path*/js/common" src="http://*path*/js/lib/require.js"></script>
The common.js file is
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
base: {
deps: ["backbone"]
}
},
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min',
'http://*path*/media/admin/js/lib/jquery.min'
],
base: 'http://*path*/media/admin/js/base',
backbone: 'http://*path*/media/admin/js/lib/backbone',
underscore: 'http://*path*/media/admin/js/lib/underscore'
}
});
The base.js file, with the settings for backbone, underscore and jQuery, contains:
define(['jquery', 'backbone', 'underscore'], function(jQuery, Backbone, _) {
//CODE
return var;
});
And the other files contain
define(['base'], function(var) {
//CODE
});
In the page I am loading the files using:
require(['common'], function() {
require(['page/file'], function() {
//CODE
});
});
What am I doing wrong, why jQuery, underscore and backbone fail loading sometimes and how can I fix this?
The error message is:
GET http://*host*/backbone.js 404 (Not Found) require.js:1
Uncaught Error: Script error for: backbone
http://requirejs.org/docs/errors.html#scripterror
I don't know that this is the only problem but this shim should be removed:
base: {
deps: ["backbone"]
}
You've shown a base.js file that calls define. The rule is simple: if your module calls define, then you use define to set dependencies, and the return value of the function you pass to define to set the value of your module; if your module does not call define, then you need a shim to set dependencies and determine the value of the module (if needed).
So, after clicking on a button I want to display a Lightbox containing a link to youtube.
I use requirejs and lightbox in my project, but I get an error:
"Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'colorbox'"
I think the function doesn't find Colorbox, but I don't know why.
This is my file: openYoutubeLink:
define( [ 'modules/common/preferences' ], function ( preferences ) {
return function () {
$.colorbox({width:"900px", height:"600px", iframe:true, href:"youtube.de"});
};
});
Here a part of my main.js with the require.config:
paths: {
colorbox : 'libs/jquery/jquery.colorbox-min'
}
shim: {
'colorbox' : { deps: [ 'jquery' ], exports: 'jquery' }
}
I would make it so that the main module requires jQuery and the colorbox plugin. I'd require them so that I'm sure they are both loaded when my module executes. Currently, it looks like you have the global $ defined but this looks like happenstance rather than design.
So after modifications it would look like this:
define(['modules/common/preferences', 'jquery', 'colorbox'],
function (preferences, $) {
return function () {
$.colorbox({width:"900px", height:"600px", iframe:true, href:"youtube.de"});
};
});
Also, I do not believe this is the source of your immediate problem but I should mention that the exports here is wrong:
shim: {
'colorbox' : { deps: [ 'jquery' ], exports: 'jquery' }
}
You want to have a symbol which is specific to the module being shimmed. For instance, I use the cookie plugin for jQuery and shim it like this:
'jquery.cookie': {
deps: ["jquery"],
exports: "jQuery.cookie"
}
jQuery.cookie is a symbol which is defined if and only if the jquery.cookie file has loaded and executed properly.
(kryger suggested not defining exports. While it is true that the RequireJS documentation says that plugins like those of jQuery or Backbone don't need to have an exports defined, the same documentation then mentions that the detection of error conditions won't work if exports is not used. I consider the best practice to be always defining an exports rather than wait until eventual problems crop up.)