grafici angolari che non funzionano con requirejs

Question

sto provando ad usare il grafico angolare ma non ho potuto capire come aggiungere correttamente le dipendenze. sto ottenendo seguente errore TypeError Uncaught: Impossibile leggere proprietà 'default' di indefinito negli angolari-chart.js

(function (factory) { 
 
    'use strict'; 
 
    if (typeof define === 'function' && define.amd) { 
 
    // AMD. Register as an anonymous module. 
 
     define(['angular', 'chart.js'], factory); 
 
    } else if (typeof exports === 'object') { 
 
    // Node/CommonJS 
 
     module.exports = factory(require('angular'), require('chart.js')); 
 
    } else { 
 
    // Browser globals 
 
    factory(angular, Chart); 
 
    } 
 
}(function (angular, Chart) { 
 
    'use strict'; 
 

 
    Chart.defaults.global.responsive = true; 
 
    ....

perché entrambi angolare e grafico sono indefiniti.

il mio bisogno di configurazione è

'use strict'; 
 
require.config({ 
 
    baseUrl: '/', 
 
    paths: { 
 
\t \t 'angular': '/scripts/angular', 
 
\t \t 'angular-route': '/scripts/angular-route', 
 
\t \t 'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min', 
 
\t \t 'angular-animate': '/scripts/angular-animate.min', 
 

 
\t \t 'chart': '/scripts/chart', 
 
\t \t 'angular-chart': '/scripts/angular-chart', 
 
\t \t 
 
\t \t 'data-utils': '/common/data-utils', 
 
\t \t 'string-utils': '/common/string-utils', 
 

 
     'app': '/config/app', 
 
     'routes': '/config/routes' 
 
    }, 
 
\t shim: { 
 
\t \t 'app': { 
 
\t \t  deps: ['angular', 'angular-route', 'ui-bootstrap', 'data-utils', 'string-utils', 'angular-chart'] 
 
\t \t }, 
 
\t \t 
 
\t \t 'angular-route': { 
 
\t \t \t deps: ['angular'] 
 
\t \t }, 
 
\t \t 'ui-bootstrap': { 
 
\t \t  deps: ['angular', 'angular-animate'] 
 
\t \t }, 
 
\t \t 'angular-animate': { 
 
\t \t  deps: ['angular'] 
 
\t \t }, 
 
\t \t 'angular-chart': { 
 
\t \t  deps: ['angular', 'chart'] 
 
\t \t } 
 
\t } 
 
}); 
 

 
require 
 
(
 
    ['app'], 
 
    function(app) 
 
    { 
 
     angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'app']); 
 
    } 
 
);

mio controller è

define(['app'], function(app) 
 
{ 
 
\t app.controller('homeController', 
 
    [ 
 
     '$scope', 
 
     function($scope) 
 
     { 
 
      $scope.page = 
 
      { 
 
       title: 'Welcome to Easy Stitch' 
 
      }; 
 

 
      $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
 
      $scope.series = ['Series A', 'Series B']; 
 

 
      $scope.data = [ 
 
       [65, 59, 80, 81, 56, 55, 40], 
 
       [28, 48, 40, 19, 86, 27, 90] 
 
      ]; 
 
     } 
 
    ]); 
 
});

ogni altra dipendenza sta lavorando bene tranne per questo. per favore se qualcuno può aiutare

Answer 1

Immagino di dover correggere la dipendenza nel mio file di configurazione richiesto e dopo che funziona correttamente.

require 
 
(
 
    ['app'], 
 
    function(app) 
 
    { 
 
     angular.bootstrap(document, ['ngAnimate', 'ui.bootstrap', 'chart.js', 'app']); 
 
    } 
 
);

Answer 2

Sembra angolare-chart aspetta il modulo Chart.js di essere chiamato "chart.js":

if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module. 
    define(['angular', 'chart.js'], factory); 
} ... 

Chart.js si utilizza anonima define (ref), quindi è a voi per nome esso. Si sono chiamandolo "grafico":

require.config({ 
    paths: { 
     ... 
     'chart': '/scripts/chart', 
     ... 

Così, lo chiamano semplicemente 'chart.js' nella configurazione paths!

Answer 3

è possibile modificare le angolari-chart.js:

chart.js => grafico,

(function (factory) { 
    'use strict'; 
    if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module 
    define(['angular', 'chart'], factory); 
    } else if (typeof exports === 'object') { 
    // Node/CommonJS 
    module.exports = factory(require('angular'), require('chart')); 
    } else { 
    // Browser globals 
    factory(angular, Chart); 
    } 

Answer 4

Dopo l'installazione angolare-chart con pergolato, ho dovuto cambiare

define(['angular', 'chart'], factory); 

in

define(['angular', 'Chart'], factory) 

perché Charts.js esporterà Chart e non.