AngularStrap 2.x throw 404 Not found when used with requirejs
I am trying to use angular -strap with requirejs in a project and I did the following in requirejs.config.js:
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'],
.......
}
});
This is a sample file (I've added points for the removed parts).
When I tried to start the application, 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 is looking for these files in the baseUrl, so they were not found. How do angular-strap search for templates in the correct file?
+3
source to share
1 answer
I found the problem and the injector couldn't find the "angular-strap-tpl" path, so when added to app.js in the required function it worked.
Sample code from 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 application manual boot buffer added "mgcrea.ngStrap" to the dependency array like this:
var apps_deps = [
'elasticjs.service',
'solrjs.service',
'ngAnimate',
'mgcrea.ngStrap',
'ngRoute',
'ngSanitize',
'ngDragDrop'
];
This fixed the problem and now it works well.
+4
source to share