angularjs - how to use chart.js with angular-chart using requirejs -

trying implement lazy load using requirejs. everything fine when not using charts. when want use charts(angular charts), not going sucseed! using chart.js angular-chart.

here main.js:

 require.config({  baseurl: "http://localhost/ums/angular/js",     paths: {         'angular': 'lib/angular.min',         'ngroute': 'lib/angular-route.min',         'flash': 'lib/angular-flash',         'angular-loading-bar': 'lib/loading-bar.min',         'nganimate': 'lib/angular-animate.min',         'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',         'uniquefield': 'admin/directives/angular-unique',         'input_match': 'admin/directives/angular-input-match',         'uniqueedit': 'admin/directives/angular-unique-edit',         'angularamd': 'lib/angularamd.min',         'chart.js': 'lib/chart.min',          'angular-chart':'lib/angular-chart.min',            'app': 'admin/app',         },         waitseconds: 0,          shim: {           'angular': { exports: 'angular'},         'angularamd': { deps: ['angular']},         'angular-chart': { deps: ['angular','chart.js']},         'ngroute':{ deps: ['angular']},         'angular-loading-bar':{ deps:['angular'] },         'nganimate': { deps:['angular'] } ,         'ui.bootstrap': {deps: ['angular'] },         'uniquefield': {deps: ['angular'] },         'input_match': {deps: ['angular'] },         'uniqueedit': {deps: ['angular'] },         'flash': {deps: ['angular'] },         },         deps: ['app']     }); 

here app.js:

var base_url="http://localhost/ums/"; define(['angularamd', 'ngroute','flash','angular-loading-bar','nganimate','uniquefield','input_match','angular-chart'], function (angularamd) { var app = angular.module('angularapp', ['ngroute','flash','angular-loading-bar','nganimate','uniquefield','input_match','angular-chart']);   app.config(['$routeprovider', function($routeprovider){     $routeprovider         .when('/dashboard', angularamd.route({                 title : 'dashboard',                 controller : 'dashboardctrl',                 templateurl : base_url+'angular/partials/admin/dashboard.php',                 controllerurl: base_url+'angular/js/admin/controllers/dashboardctrl.js'             }))  //.......................all routing ............//  .otherwise({             redirectto : '/dashboard'         }); }]); app.run(['$rootscope', '$route', function($rootscope, $route) {     $rootscope.$on('$routechangesuccess', function() {         document.title = $route.current.title;     }); }]);     // bootstrap angular when dom ready     return angularamd.bootstrap(app);  }); 

how implement dependancy between them? suggestions? examples?

from documentation - http://requirejs.org/docs/api.html

if module id has 1 of following characteristics, id not passed through "baseurl + paths" configuration, , treated regular url relative document:
• ends in ".js".
• starts "/".
• contains url protocol, "http:" or "https:".

this kick in chart.js module , requirejs attempt load chart.js directory contains html page running requirejs

note - should able see in developer tools > network tab. note request chart.js doesn't go path expect.

---

this seems bug (with angular-chart) - see similar issue typeahead.js - https://github.com/twitter/typeahead.js/issues/1211

---

there couple of ways fix / workaround this

1. modify angular-chart code make expected module id without dot - chartjs. change chart.js in above configuration chartjs. correct way.

2. rename chart.min.js file chart.js , put in same folder html file running requirejs. @ best very temporary fix.

3. set nodeidcompat true - make module id something.js equivalent something. change module id in configuration chart.

   require.config({     nodeidcompat: true,     paths: {         'chart': base_url + '/lib/chart.min',          ... 

if using r.js compress / consolidate, might want test before settling on workaround.