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

Question

I think it can be more generic question. How can I add custom (vendor) scripts to yeoman yo generated app. I installed angular charts with npm (npm install angular-chart --save). I add scripts to 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 -->
But making distribution with grunt does not create proper minified script.
scripts.226f19b7.js:1 Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/

Answer 1

Include the library in your grunt task build (Gruntfile.js)
You will find this task or something like it:
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
'concat',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
I think you would find your solution in 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

Thanks to webenegized I finally found the problem and the solution.
At first, it should work out of the box!! No gruntfile.js modification are needed or any other action. Just npm install dependecies, put the required script tag(s) in the index.html and voila. The magic of yeoman generator.
The error I encouter was caused by the copy/paste of incorrect script tags values from the example on the angular-chart.js website (see: installation section). The site example states:
<script src="node_modules/chart.js/Chart.min.js"></script>
but the real path should be
<script src="node_modules/chart.js/dist/Chart.min.js"></script> (dist folder is missing).
I should have spotted this because the error I've got clearly show that angular-chart.js was included and the complaint was about its dependency (chart.js). It turns out I'm less perceptive that I think.