Как я могу добавить угловую диаграмму в угловое приложение, созданное йоманом?

Я думаю, что это может быть более общий вопрос. Как я могу добавить пользовательские сценарии (поставщика) в созданное приложение yoman yo. Я установил угловые диаграммы с помощью npm (npm install angular-chart --save). Добавляю скрипты в index.html.

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->    
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<!-- endbuild -->

Но создание дистрибутива с помощью grunt не создает надлежащего минимизированного сценария.

scripts.226f19b7.js:1 Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/

angularjs yeoman-generator-angular angular-chart
person piradian    schedule 05.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Включите библиотеку в сборку задачи grunt (Gruntfile.js).

Вы найдете это задание или что-то вроде него:

grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
'concat',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);

Я думаю, вы найдете свое решение в задаче copy:dist

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '*.html',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    },
    {
      expand:true,
      cwd:'node_modules/yourlib/,
      src:'*',
      dest:'<%=yeoman.dist %>'
     }
person que1326    schedule 05.09.2016
comment
Вы имеете в виду, что я должен добавить копирование chart.js в dist/scripts в задаче grunt? - person piradian; 05.09.2016
comment
Мой файл grunt. Я надеялся, что это можно сделать сразу, не «взламывая» gruntfile. - person piradian; 06.09.2016
comment
Это не взлом, это установка - person que1326; 06.09.2016
comment
Просто добавьте библиотеку chart.js в новый объект ниже bootstrap в копии: dist, я отредактировал свой ответ - person que1326; 06.09.2016

arrow_upward
0
arrow_downward

Благодаря webenegized я наконец нашел проблему и решение.
Сначала все должно работать из коробки!! Никаких модификаций gruntfile.js или каких-либо других действий не требуется. Просто установите зависимости npm, поместите необходимые теги скрипта в index.html и вуаля. Магия генератора йоменов. Ошибка, которую я обнаружил, была вызвана копированием/вставкой неправильных значений тегов сценария из примера на angular-chart.js (см. раздел установки). В примере сайта указано:
<script src="node_modules/chart.js/Chart.min.js"></script>
но реальный путь должен быть
<script src="node_modules/chart.js/dist/Chart.min.js"></script> (папка dist отсутствует).
Я должен был заметить это, потому что ошибка, которую я получил, ясно показывает, что angular-chart.js был включен, и жалоба была на его зависимость (chart.js). Оказывается, я менее проницателен, чем я думаю.

person piradian    schedule 06.09.2016