Having Bower devdependencies inserted in HTML with Grunt

Question

I installed AngularJS via Yeoman scaffolding. When I run

grunt bower-install

It reflexes in the HTML only the dependencies that are in bower.json under the "dependencies" section. How can I make it include the deps under the "devDependencies" section?

Answer 1

As stated in Angular changelog, bower-install is deprecated in version 9.0.0 see here, now the bower-install task is deprecated and it should be replaced with wiredep. Edit Gruntfile.js file with this:

wiredep: {
  options: {
    cwd: '<%= yeoman.app %>'
  },
  dev: {
    devDependencies: true,
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//
  },
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//
  },
  sass: {
    src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    ignorePath: /(\.\.\/){1,2}bower_components\//
  }
},

And now install DevDependencies with

grunt wiredep:dev

Answer 2

Apparently I need 50 reputation to comment on the accepted answer so I will have to add here, for anyone in the future that comes across this thread, the changes in accepted answer worked for me but I had to change one other line further down in gruntfile.js

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    ...

    grunt.task.run([
      'clean:server',
      'wiredep:dev', <-- Changed this from plain 'wiredep'
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });

Answer 3

If you scaffolded out the Yeoman generator correctly (check for errors in your log), then the dependencies should all have been installed, including those listed under "devDependencies". Failing that please delete your whole bower_componentsfolder, make sure there are no syntax errors in your bower.json and just run

bower install

in your root directory. This will install everything.