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

Question

Trying to implement lazy load using requirejs. Everything is fine when I am not using charts. But when I want to use charts(angular charts), not going to sucseed! Using chart.js with angular-chart.

Here is 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 is 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 is ready
    return angularAMD.bootstrap(app);

});

How to implement dependancy between them? Any suggestions? any examples?

Answer 1

From the documentation - http://requirejs.org/docs/api.html

If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:
? Ends in ".js".
? Starts with a "/".
? Contains an URL protocol, like "http:" or "https:".

This will kick in for your chart.js module and RequireJS will attempt to load chart.js from the directory that contains the HTML page running RequireJS

Note - you should be able to see this in your Developer Tools > Network tab. Note that the request for chart.js doesn't go to the path that you expect.

---

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

---

There are a couple of ways to fix / workaround this

1. Modify angular-chart code to make the expected module ID as something without a dot - say chartjs. Then change chart.js in your above configuration to chartjs. This would be correct way.

2. Rename you chart.min.js file to chart.js and put it in the same folder as your html file running RequireJS. This would at best be a very very temporary fix.

3. Set nodeIDCompat to true - this will make module ID something.js equivalent to something. Then change the module ID in your configuration to chart. So something like

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

If you are using r.js to compress / consolidate, you might want to just test that too before settling on this workaround.