如何将 angular-chart 添加到 yeoman 生成的 angular 应用程序？

Question

我认为这可以是更笼统的问题。如何将自定义（供应商）脚本添加到 yeoman yo 生成的应用程序。我使用 npm 安装了 angular 个图表（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/

Answer 1

在您的 grunt 任务构建中包含该库 (Gruntfile.js)

你会发现这个任务或类似的东西：

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

我想你会在 copy:dist task

中找到你的解决方案

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 %>'
     }

Answer 2

感谢webenegized我终于找到了问题和解决方案。
首先，它应该开箱即用！！不需要 gruntfile.js 修改或任何其他操作。只需 npm install dependecies，将所需的脚本标记放在 index.html 中，瞧。自耕农发电机的魔力。我遇到的错误是由 不正确的 脚本标记值的 copy/paste 引起的 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)。原来我没有我想的那么敏锐

如何将 angular-chart 添加到 yeoman 生成的 angular 应用程序？

How can I add angular-chart to yeoman generated angular app?

angularjs

yeoman-generator-angular

angular-chart