bower components aren't served properly

[kmhosny]

Hi,

i had an issue when i generated an angular app, the bower components aren't copied under app and not included at all since the build.
i ran a gulp serve immediatly after files generation but the page didn't include bootstrap or angular libs so i get errors and page wasn't formated, the reason was in page's source i couldn't find the bower generated libs injected.

i looked into the gulp file i can see a bower task but it's not being called by the build or serve.

i added bower task to serve and build but i get an error that angular isn't installed although it's available under bower_components.

after some debugging i found that some of node modules specially wiredep relies on file systems functions from node JS that are marked as deprecated such as fs.existsSync which i guess doesn't work well on windows anyway cause it messed up the paths a little bit.

further investigation i found that it's best to remove the property directory from the wiredep object and the script will get the correct bower.json file on it's own and it was able to inject the libraries and css into index.html propery but according to the default script it redirects the output to the views folder.

so it used to be:

return gulp.src(paths.views.main)
    .pipe(wiredep({
      directory: yeoman.app + '/bower_components',
      ignorePath: '..'
    }))
  .pipe(gulp.dest(yeoman.app + '/views'));

to

return gulp.src(paths.views.main)
    .pipe(wiredep({
      ignorePath: '..'
    }))
  .pipe(gulp.dest(yeoman.app + '/views'));

and added the bower task to serve task

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['lint:scripts'],
    ['start:client'],
    ['bower'],
    'watch', cb);
});

but still the bower_components folder isn't copied under app while according to the generation script and files it searchs for it under app so i had to manually copy it.
i attached a screenshot for what the file looked like after generating the template using yo angular.

So i guess since wiredep's issue isn't really the template's problem it's better to remove the directory property from the default script and add bower task to fix the problem, i would be great to fix this issue as the template is being relied on very much.
Thanks
Karim

[joelcolucci]

@kmhosny I ran into the same problem.

In comparing the grunt build to the gulp, I've come up with a working solution to get the app serving with gulp serve without having to move bower_components into the app.

Note: I've not yet tested the test, dist, prod tasks with the below changes.

Update 1: Change the start:server task to the following

gulp.task('start:server', function() {
  $.connect.server({
    root: [yeoman.app, '.tmp'],
    livereload: true,
    // Change this to '0.0.0.0' to access the server from outside.
    port: 9000,
    middleware: function (connect) {
      return [
        connect().use(
          '/bower_components',
          connect.static('./bower_components')
        )]
    }
  });
});

Update 2: Change the server task to the following

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['lint:scripts'],
    ['start:client'],
    ['bower'],
    'watch', cb);
});

Update 3: Change the bower task to the following

gulp.task('bower', function () {
  return gulp.src(paths.views.main)
    .pipe(wiredep({
      ignorePath: '..'
    }))
    .pipe(gulp.dest(yeoman.app + '/'));
});

[BrahimDahmani]

The @kmhosny solution work for me

[rbkh]

Hey Everyone,

That also worked for me. Is there a plan to include this in the generator's master branch anytime soon? If I need to make a PR that is fine, just let me know 😍