1

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?

Community
  • 1
  • 1
VBMali
  • 1,360
  • 3
  • 19
  • 46
  • you can try 2 things, add `chart.js` in the define() block of app.js and remove or increase waitSecond: 0 to 60 or something – Linh Pham Jul 10 '15 at 09:26
  • `waitSecond` timeout setting for requireJS to wait for an JS module to be loaded. And if there're any module need more than 0s to be loaded. It will considering as failed. – Linh Pham Jul 10 '15 at 09:39
  • requirejs.onError = function (err) { if (err.requireType === 'timeout') { console.error("There is an error occurred due to network connection. \nPlease reload the page: \n\n "+err); } else { console.error("There is an error occurred due to network connection. \nPlease reload the page: \n\n "+err); } }; – Linh Pham Jul 10 '15 at 09:41
  • 1
    Use the code above in your `main.js` it will help to log out requireJS error in browser's console. – Linh Pham Jul 10 '15 at 09:42
  • 1
    @Linh Pham - waitSecond = 0 disables the timeout. – potatopeelings Jul 10 '15 at 10:40
  • @LinhPham: (may be)Its because of that module ID `chart.js` . So how can I tackle with this. Because browser console says `chart.js not found`, even my file name is Chart.min.js – VBMali Jul 10 '15 at 13:53
  • @SujVan have you added `'chart.js'` into define() block of `app.js`? – Linh Pham Jul 10 '15 at 14:22
  • @LinhPham: In define block of app.js there is `angular-chart` And I already mentioned in `shim` that `angular-chart` is depend on `chart.js`. So do I need to also define chart.js there too in define block of app.js. No, I think so.! – VBMali Jul 10 '15 at 14:36
  • @SujVan can you tell me the exactly error that got logged by browser console? What is the url you saw there? – Linh Pham Jul 10 '15 at 14:38
  • @SujVan and the newly updated answer seem legit, avoid to use `.js` because it may confuse requireJS in someway (I never know or heard, but better not using some sensitive character, for example: `'\'` ) – Linh Pham Jul 10 '15 at 14:41

1 Answers1

5

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.

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Cool! It should work if you put chart.js in that path, or a better idea would be to set baseUrl – potatopeelings Jul 10 '15 at 13:20
  • Hi, now its not giving any error in console, don't know hows that error has gone.! Now the charts are not going to shown.Means `` tag is not working? – VBMali Jul 10 '15 at 13:24
  • If Chart.js has loaded properly, it could simply be a problem with the sizing. Make sure you have a width and height set on the canvas element (directly - width="300" height="200") – potatopeelings Jul 10 '15 at 13:27
  • Sorry, it was my mistake. The error is still exists! And I have putted up the file where that error has been saying. Still the same. – VBMali Jul 10 '15 at 13:30
  • Its error: `"NetworkError: 404 Not Found - http://localhost/ums/admin/chart.js"` But my file name `Chart.min.js`. And dependancy name is chart.js. You can look over the above code mentioned in post. – VBMali Jul 10 '15 at 13:32
  • If you are saying that in your answer, so hows my other modules get loaded? only the problem with chart.js. As per your answer my module name should not contain .js. So angular-chart uses that chart.js module in their js.So how can I tackle with THIS? – VBMali Jul 10 '15 at 13:37
  • Your other modules don't end in .js. Just a minute - updating answer. Cheers! – potatopeelings Jul 10 '15 at 14:23
  • If I am going to remove that ending .js, what other changes do i need to do? And waiting for your updated answer! – VBMali Jul 10 '15 at 14:38
  • Changing the angular chart code affecting(giving inject error). Applying 1, 2,3 gibes same error : `Failed to instantiate module angularapp due to: [$injector:modulerr]` – VBMali Jul 10 '15 at 14:50
  • NOTE: Post Updated (* baseUrl: used instead of using javascript global variable.) – VBMali Jul 10 '15 at 14:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82967/discussion-between-potatopeelings-and-sujvan). – potatopeelings Jul 10 '15 at 15:02