angularjs - AngularStrap 2.x 与 requirejs 一起使用时抛出 404 Not Found

Question

我尝试在项目中将 Angular-strap 与 requirejs 一起使用，并在 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'],

    .......
  }
});

这是文件的示例(我添加了点以删除详细信息)。

当我尝试启动应用程序时，我收到以下控制台日志:

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
................................

我注意到 Angular-strap 在 baseUrl 中查找这些文件，所以没有找到它们。如何使 Angular-strap 搜索正确文件中的模板？

Answer 1

我发现问题是注入(inject)器找不到“angular-strap-tpl”路径，所以当添加到 app.js 中的 require 函数时它起作用了。

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'
]

然后在应用程序的手动 Bootstrap 中将“mgcrea.ngStrap”添加到依赖项数组中，如下所示:

  var apps_deps = [
    'elasticjs.service',
    'solrjs.service',
    'ngAnimate',
    'mgcrea.ngStrap',
    'ngRoute',
    'ngSanitize',
    'ngDragDrop'
  ];

这解决了问题并且现在运行良好。