I'm trying to use angular-strap with requirejs in a project and I did the following in requirejs.config.js file:
require.config({
baseUrl: 'app',
paths: {
..........
angular: '../bower_components/angular/angular',
'angular-strap': '../bower_components/angular-strap/dist/angular-strap.min',
'angular-strap-tpl': '../bower_components/angular-strap/dist/angular-strap.tpl.min',
..............
},
shim: {
...........
angular: {
deps: ['jquery'],
exports: 'angular'
},
bootstrap: {
deps: ['jquery']
},
jquery: {
exports: 'jQuery'
},
// simple dependency declaration
'jquery-ui': ['jquery'],
'jquery.flot': ['jquery'],
'jquery.flot.pie': ['jquery', 'jquery.flot'],
'jquery.flot.selection':['jquery', 'jquery.flot'],
'jquery.flot.stack': ['jquery', 'jquery.flot'],
'jquery.flot.stackpercent':['jquery', 'jquery.flot'],
'jquery.flot.time': ['jquery', 'jquery.flot'],
'angular-sanitize': ['angular'],
'angular-animate': ['angular'],
'angular-cookies': ['angular'],
'angular-dragdrop': ['jquery','jquery-ui','angular'],
'angular-loader': ['angular'],
'angular-mocks': ['angular'],
'angular-resource': ['angular'],
'angular-route': ['angular'],
'angular-touch': ['angular'],
'angular-strap': ['angular', 'angular-animate', 'bootstrap','timepicker', 'datepicker'],
'angular-strap-tpl': ['angular', 'angular-strap'],
.......
}
});
That's sample of the file (I added dots for removed details).
When I tried to start the app, I got the following console logs:
GET http://localhost:8983/project/tooltip/tooltip.tpl.html 404 (Not Found) angular.js:8521
GET http://localhost:8983/project/tooltip/tooltip.tpl.html 404 (Not Found) angular.js:8521
GET http://localhost:8983/project/tooltip/tooltip.tpl.html 404 (Not Found) angular.js:8521
................................
I noticed that angular-strap looks for these files in the baseUrl, so they weren't found. How can make angular-strap search for the templates in the correct file?
I found the problem and it was the injector can't find the "angular-strap-tpl" path, so when added to the app.js in the require function it worked.
Sample code from the app.js
define([
'angular',
'jquery',
'underscore',
'require',
'elasticjs',
'solrjs',
'bootstrap',
'angular-route',
'angular-sanitize',
'angular-animate',
'angular-strap',
'angular-strap-tpl',
'angular-dragdrop',
'extend-jquery'
]
and then in the manual bootstrapper of the application added "mgcrea.ngStrap" to the dependency array like this:
var apps_deps = [
'elasticjs.service',
'solrjs.service',
'ngAnimate',
'mgcrea.ngStrap',
'ngRoute',
'ngSanitize',
'ngDragDrop'
];
This solved the problem and it works well now.
Related
today I'm tryng to configure angular material with requirejs but I receive an annoing problem:
Error: ngMaterial requires HammerJS to be preloaded.
This's my configurator file:
require.config
paths:
jquery: "../bower_components/jquery/dist/jquery"
domReady: "../bower_components/requirejs-domready/domReady"
underscore: "../bower_components/underscore/underscore"
store: "../bower_components/store-js/store"
moment: "../bower_components/moment/min/moment-with-langs"
jsonPath: "../libs/jsonpath-0.8.0"
es5Shim: "../bower_components/es5-shim/es5-shim"
consoleShim: "../bower_components/console-shim/console-shim"
json3: "../bower_components/json3/lib/json3.min"
promise: "../bower_components/es6-promise/promise.min"
hammer: "../bower_components/hammerjs/hammer"
angular: "../bower_components/angular/angular"
ngAnimate: "../bower_components/angular-animate/angular-animate.min"
ngAria: "../bower_components/angular-aria/angular-aria.min"
ngMaterial: "../bower_components/angular-material/angular-material"
ngRoute: "../bower_components/angular-route/angular-route"
baseObject: "scripts/helpers/base-object"
app: "scripts/app/app"
env: "../env"
shim:
hammer:
exports: "Hammer"
angular:
exports: "angular"
deps: [ "jquery" ]
ngRoute:
exports: "angularRoute"
deps: [ "angular" ]
ngAnimate:
exports: "angularAnimate"
deps: [ "angular" ]
ngAria:
exports: "angularAria"
deps: [ "angular" ]
ngMaterial:
exports: "angularMaterial"
deps: ["Hammer", "angular"]
underscore:
exports: "_"
jsonPath:
exports: "jsonPath"
promise:
exports: "Promise"
deps: [
"jquery","hammer", "angular", "ngMaterial", "ngAnimate", "ngAria", "consoleShim", "es5Shim", "consoleShim",
"json3", "underscore", "baseObject", "promise", "env"
]
What's wrong???
I had the same issue, you can hack it with this solution:
https://github.com/angular/material/issues/456
What you need is just to wrrap the hammer.js with this proxy.
it worked for me, here is the require file:
'hammer': 'lib/hammerjs/hammer.min',
'hammerProxy': 'js/requirejs-proxy/hammer-proxy',
...
'angularMaterial': {
deps: ['angular', 'angular-animate', 'hammerProxy', 'angular-aria']
}
and here is hammer-proxy.js file:
define(['hammer'], function (Hammer) {
this.Hammer = Hammer;
return Hammer;
});
Let me know if you need any help with implamintation.
I have app.js file with the following config:
require.config({
paths: {
// vendors
'angular': 'vendor/angular',
'ngResource': 'vendor/angular-resource.min',
'ngRoute': 'vendor/angular-route.min',
'ngAnimate': 'vendor/angular-animate.min'
},
shim: {
ngAnimate: {
deps: ['angular']
},
angular: {
deps: [],
exports: 'angular'
},
ngRoute: {
deps: ['angular']
},
ngResource: {
deps: ['angular']
}
},
baseUrl: 'scripts'
});
Now i'm trying to instantiate angular trough require:
define("app", ["angular", "ngResource"], function (angular) {
var app = angular.module("app", ["ngResource"]);
// you can do some more stuff here like calling app.factory()...
return app;
});
But it throws out:
Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I'm following this guide step-by-step.
What am i doing wrong here?
I am using requirejs-backbone to display list of users:However I'm getting this "Uncaught Object" error when i load the page. I debugged it and saw its my main.js that is causing the trouble. Below is my main.js.
require.config({
baseUrl: 'scripts/modules/sub-accounts/',
paths: {
'underscore': '../../libs/underscore',
'backbone': '../../libs/backbone',
'views': 'views',
'collections': 'collections',
'models': 'models',
'templates': 'templates'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['jquery', "underscore"],
exports: "Backbone"
},
'bootstrap': {
deps: ['jquery']
}
}
});
require([
'jquery',
'underscore',
'backbone',
'router'
], function ($, _, backbone, router){
SubAccountRouter.initialize();
});
EDIT:::
This is the place(init.js file) where im initializing all my scripts, apps and other libraries apart from the config in main.js. I'm not sure is that might be causing the issue:
script : [
'/scripts/libs/require/require.js',
'/scripts/libs/require/text.js',
'/scripts/libs/underscore.js',
'/scripts/libs/backbone.js',
'/scripts/modules/sub-accounts/main.js',
'/scripts/modules/sub-accounts/router.js'
]
Any ideas as to where i might be going wrong??
I have a problem with an r.js build in my app loader.
Unbuild mode is working perfect but after a build with r.js the variables in app_loader.js#L7 bb and hb are undefined. So far I work around by using global variables Handlebars und Backbone but what is wrong with this shim?
I have removed your global references and tested this locally. It works.
build.js - updated to use app_main as config file
({
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
appDir: "../www-root-dev",
dir: "../www-root",
keepBuildDir: false,
optimize: "uglify2",
mainConfigFile: "../www-root-dev/assets/js/app_main.js",
modules: [{
name: "app_main"
}]
})
app.js
define(["app_loader"], function(loader){
var $ = loader.$, Backbone = loader.Backbone;
...
});
app_loader.js
define(["jquery","underscore","backbone","handlebars","app_routes"],
function($, _, Backbone, Handlebars, router){
return {
$: $.noConflict(),
_: _,
Backbone: Backbone,
router: router,
Handlebars: Handlebars
};
});
app_main.js - updated to simplify paths
require.config({
baseUrl: './assets/js',
paths: {
mvc: '../../mvc'
},
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
deps: ['jquery'],
exports: 'Handlebars'
}
}
});
require(['app'], function(App){
App.initialize();
});
app_routes.js
define(["jquery", "underscore", "backbone", "mvc/demo.view.js", "mvc/demo.model.js"], function($, _, Backbone, DemoView, DemoModel) { ... });
demo.model.js
define(["backbone"], function(Backbone) { ... });
demo.view.js
define(["jquery","backbone","text!mvc/demo.html"], function($, Backbone,demoTemplate) { ... });
I think the error is because in your shim you have exported backbone and handlebar as Backbone and Handlebars respectively,
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars:{
deps: ['jquery'],
exports: 'Handlebars'
},
and in your app_loader.js#L7 you are using it as bb and hb.
Either in shim export it as bb and hb:
backbone : {
deps: ['underscore', 'jquery'],
exports: 'bb'
},
handlebars:{
deps: ['jquery'],
exports: 'hb'
},
or use Backbone and Handlebars in app_loader.js#L7 instead of bb and hb:
define("app_loader",[
"jquery",
"underscore",
"backbone",
"handlebars",
"order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){
I am also new to backbone and requirejs but it should help.
I have forked your github project and use grunt requirejs to run the optimization.
I manage to run the site and didn't notice any console errors in Chrome.
I took your project and noticed the errors in your build. I then made some changes to your app_main.js file as follows. Let me know if this solves your issues? Solved mine.
// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config({
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
},
paths: {
appLoader: 'app_loader',
jquery: 'jquery',
underscore: 'underscore',
backbone : 'backbone' ,
handlebars: 'handlebars'
}
});
require([
'app'
], function(App){
App.initialize();
});
Hi all Im trying to load backbone and backbone-relational in require js every time I just require 'backbone', this is my code:
main.js:
requirejs.config({
paths: {
'domReady': 'lib/require/domReady',
'text': 'lib/require/text',
'jquery': 'lib/jquery/jquery',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone/loader',
'relational': 'lib/backbone/relational',
'iosync': 'lib/backbone/iosync',
'iobind': 'lib/backbone/iobind'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'relational': {
deps: ['backbone']
},
'iobind': {
deps: ['backbone']
},
'iosync': {
deps: ['backbone']
}
}
});
require([
'domReady!',
'jquery',
'backbone',
'models/application',
'views/application'
], function () {
// start the app
var applicationModel = new BACON.models.Application();
var applicationView = new BACON.views.Application({
el: $('body'),
model: applicationModel
});
});
and lib/backbone/loader.js:
define([
'lib/backbone/backbone',
'relational',
'iobind',
'iosync'
]);
but running my app on chrome gives me:
Uncaught Error: Load timeout for modules: relational,iobind,iosync
So it seems i have a dependency loop... Is there a way to make this work or is there another way to accomplish this??
In your shim config you added a depedency for relational to backbone, which refer to libs/backbone/loader, and this generate a loop while loading lib/backbone/loader.js.
You should change your path config for backbone to 'lib/backbone/backbone' and add another named path for the loader if you want.