AngularStrap 2.x throw 404 Not Found when used with requirejs

Question

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?

Answer 1

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.