generator-angular

generator-angular copied to clipboard

scripts files in bower_components not loaded

when i tried gulp bower i get this error

Error: Error: angular is not installed. Try running `bower install`.
    at C:\tekportal\node_modules\wiredep\wiredep.js:30:56
    at C:\tekportal\node_modules\wiredep\lib\detect-dependencies.js:145:29
    at forOwn (C:\tekportal\node_modules\wiredep\node_modules\lodash\dist\lodash.js:2106:15)
    at Function.forEach (C:\tekportal\node_modules\wiredep\node_modules\lodash\dist\lodash.js:3303:9)
    at detectDependencies (C:\tekportal\node_modules\wiredep\lib\detect-dependencies.js:34:7)
    at wiredep (C:\tekportal\node_modules\wiredep\wiredep.js:70:39)
    at DestroyableTransform._transform (C:\tekportal\node_modules\wiredep\wiredep.js:135:34)
    at DestroyableTransform.Transform._read (C:\tekportal\node_modules\wiredep\node_modules\readable-stream\lib_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:\tekportal\node_modules\wiredep\node_modules\readable-stream\lib_stream_transform.js:172:12)
    at doWrite (C:\tekportal\node_modules\wiredep\node_modules\readable-stream\lib_stream_writable.js:237:10)

i use windows 7

did you try running bower install like it said?

I just came across the same issue. I tried doing bower install and it didn't do anything. I also tried deleting the bower_components folder and then doing bower install and bower reinstalled everything, but the issue didn't change.

I have fixed this by making two changes.

1. the .bowerrc has the directory as "bower_components" but it should be "app/bower_components"
2. the 'bower' task isn't being called in the gulpfile, i added it like this

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

the .bowerrc has the directory as "bower_components" but it should be "app/bower_components"

No it should not be: http://yeoman.io/blog/bower_components-in-project-root.html

Bower should probably be run earlier.

In every gulp-connect call $.connect.server(...), add this middleware:

  $.connect.server({
    root:['\.tmp', yeoman.app],
    livereload:true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
        connect["static"]('./bower_components')]]
    }
  });

So, the end are you solve the problem ? Please help me. I meet the same error like him.

Yes, I did. The gulp task 'serve' does not statically route its bower_components directory. In your gulpfile.js, modify this task like this:

gulp.task('start:server', function() {
  $.connect.server({
    root:['./.tmp', yeoman.app],
    livereload:true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
        connect["static"]('./bower_components')]]
    }
  });
});

Besides, several bugs are fixed in this thread: #1299

Ok, I will try it, Thanks a lot~

From: bumprat [mailto:[email protected]] Sent: Monday, March 21, 2016 8:25 PM To: yeoman/generator-angular [email protected] Cc: Huaming Li (Beyondsoft) [email protected] Subject: Re: [generator-angular] gulp serve ReferenceError: angular is not defined (#1295)

Yes, I did. The gulp task 'serve' did not statically route its bower_components directory. In your gulpfile.js, modify this task like this:

gulp.task('start:server', function() {

$.connect.server({

root:[yeoman.temp, yeoman.app],

livereload:true,

port: 9000,

middleware:function(connect, opt){

  return [['/bower_components',

    connect["static"]('./bower_components')]]

}

});

});

Besides, several bugs are fixed in this thread: #1299https://github.com/yeoman/generator-angular/issues/1299

— You are receiving this because you commented. Reply to this email directly or view it on GitHubhttps://github.com/yeoman/generator-angular/issues/1295#issuecomment-199250024

change bower task destination to app index, not view

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

Ok Thank you

From: Yue(Jason) Zhang [mailto:[email protected]] Sent: 2016年4月21日 16:36 To: yeoman/generator-angular [email protected] Cc: Huaming Li (Beyondsoft) [email protected]; Comment [email protected] Subject: Re: [yeoman/generator-angular] gulp serve ReferenceError: angular is not defined (#1295)

I fixed it and here's my solution.

First index.html. I remove the starting slash for each bower reference.

<!-- 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-aria/angular-aria.js"></script>

<script src="bower_components/angular-cookies/angular-cookies.js"></script>

<script src="bower_components/angular-messages/angular-messages.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 -->

Second .bowerrc. I added app before the bower_components

{

"directory": "app/bower_components"

}

(Optional) Third gulpfile.js. Couple thing had been updated in this file just to optimized the workflow a little. I removed '/view' in the 'bower' task, changed task name 'bower' to 'wiredep', added 'wiredep' task as a dependency for the 'build' task and changed the default task to 'serve'. I shared my whole gulpfile.js just in case it could be helpful.

'use strict';

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var openURL = require('open');

var lazypipe = require('lazypipe');

var rimraf = require('rimraf');

var wiredep = require('wiredep').stream;

var runSequence = require('run-sequence');

var yeoman = {

app: require('./bower.json').appPath || 'app',

dist: 'dist'

};

var paths = {

scripts: [yeoman.app + '/scripts/*/.js'],

styles: [yeoman.app + '/styles/*/.scss'],

test: ['test/spec/*/.js'],

testRequire: [

yeoman.app + '/bower_components/angular/angular.js',

yeoman.app + '/bower_components/angular-mocks/angular-mocks.js',

yeoman.app + '/bower_components/angular-resource/angular-resource.js',

yeoman.app + '/bower_components/angular-cookies/angular-cookies.js',

yeoman.app + '/bower_components/angular-sanitize/angular-sanitize.js',

yeoman.app + '/bower_components/angular-route/angular-route.js',

'test/mock/**/*.js',

'test/spec/**/*.js'

],

karma: 'karma.conf.js',

views: {

main: yeoman.app + '/index.html',

files: [yeoman.app + '/views/**/*.html']

}

};

////////////////////////

// Reusable pipelines //

////////////////////////

var lintScripts = lazypipe()

.pipe($.jshint, '.jshintrc')

.pipe($.jshint.reporter, 'jshint-stylish');

var styles = lazypipe()

.pipe($.sass, {

outputStyle: 'expanded',

precision: 10

})

.pipe($.autoprefixer, 'last 1 version')

.pipe(gulp.dest, '.tmp/styles');

///////////

// Tasks //

///////////

gulp.task('styles', function () {

return gulp.src(paths.styles)

.pipe(styles());

});

gulp.task('lint:scripts', function () {

return gulp.src(paths.scripts)

.pipe(lintScripts());

});

gulp.task('clean:tmp', function (cb) {

rimraf('./.tmp', cb);

});

gulp.task('start:client', ['start:server', 'styles'], function () {

openURL('http://localhost:9000');

});

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

});

});

gulp.task('start:server:test', function() {

$.connect.server({

root: ['test', yeoman.app, '.tmp'],

livereload: true,

port: 9001

});

});

gulp.task('watch', function () {

$.watch(paths.styles)

.pipe($.plumber())

.pipe(styles())

.pipe($.connect.reload());

$.watch(paths.views.files)

.pipe($.plumber())

.pipe($.connect.reload());

$.watch(paths.scripts)

.pipe($.plumber())

.pipe(lintScripts())

.pipe($.connect.reload());

$.watch(paths.test)

.pipe($.plumber())

.pipe(lintScripts());

gulp.watch('bower.json', ['wiredep']);

});

gulp.task('serve', function (cb) {

runSequence('clean:tmp',

['build'],

['lint:scripts'],

['start:client'],

'watch', cb);

});

gulp.task('serve:prod', function() {

$.connect.server({

root: [yeoman.dist],

livereload: true,

port: 9000

});

});

gulp.task('test', ['start:server:test'], function () {

var testToFiles = paths.testRequire.concat(paths.scripts, paths.test);

return gulp.src(testToFiles)

.pipe($.karma({

  configFile: paths.karma,

  action: 'watch'

}));

});

// inject bower components

gulp.task('wiredep', function () {

return gulp.src(paths.views.main)

.pipe(wiredep({

  directory: yeoman.app + '/bower_components',

  ignorePath: '..'

}))

.pipe(gulp.dest(yeoman.app));

});

///////////

// Build //

///////////

gulp.task('clean:dist', function (cb) {

rimraf('./dist', cb);

});

gulp.task('client:build', ['wiredep', 'html', 'styles'], function () {

var jsFilter = $.filter('*/.js');

var cssFilter = $.filter('*/.css');

return gulp.src(paths.views.main)

.pipe($.useref({searchPath: [yeoman.app, '.tmp']}))

.pipe(jsFilter)

.pipe($.ngAnnotate())

.pipe($.uglify())

.pipe(jsFilter.restore())

.pipe(cssFilter)

.pipe($.minifyCss({cache: true}))

.pipe(cssFilter.restore())

.pipe($.rev())

.pipe($.revReplace())

.pipe(gulp.dest(yeoman.dist));

});

gulp.task('html', function () {

return gulp.src(yeoman.app + '/views/*/')

.pipe(gulp.dest(yeoman.dist + '/views'));

});

gulp.task('images', function () {

return gulp.src(yeoman.app + '/images/*/')

.pipe($.cache($.imagemin({

    optimizationLevel: 5,

    progressive: true,

    interlaced: true

})))

.pipe(gulp.dest(yeoman.dist + '/images'));

});

gulp.task('copy:extras', function () {

return gulp.src(yeoman.app + '//.', { dot: true })

.pipe(gulp.dest(yeoman.dist));

});

gulp.task('copy:fonts', function () {

return gulp.src(yeoman.app + '/fonts/*/')

.pipe(gulp.dest(yeoman.dist + '/fonts'));

});

gulp.task('build', ['clean:dist'], function () {

runSequence(['images', 'copy:extras', 'copy:fonts', 'client:build']);

});

gulp.task('default', ['serve']);

— You are receiving this because you commented. Reply to this email directly or view it on GitHubhttps://github.com/yeoman/generator-angular/issues/1295#issuecomment-212808834

Thank you @bumprat .It works like a charm.

I have one solution that worked fine for me,

find these code snippet under gulpfile.js

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

then just remove the yeoman.app + after the directory:

leave it like this

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

Anyone looking for a solve for this should take the gulp file from this thread 1299.

Also you may get some errors if you did not select the same options as @bumprat did in their gulp file. i.e I didn't install sass and modified the file to remove that requirement.

Hi, whit the @bumprat help I could do something that works better for me, because I tested the gulp.js file of this thread and I had some problems with the index.html location and there were some differences in the file. Also the livereload with the js files was failing, so if my file can help to anyone I paste it here.

// Generated on 2016-09-28 using generator-angular 0.15.1
'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var openURL = require('open');
var lazypipe = require('lazypipe');
var rimraf = require('rimraf');
var wiredep = require('wiredep').stream;
var runSequence = require('run-sequence');

var yeoman = {
  app: require('./bower.json').appPath || 'app',
  dist: 'dist'
};

var paths = {
  scripts: [yeoman.app + '/scripts/**/*.js'],
  styles: [yeoman.app + '/styles/**/*.scss'],
  test: ['test/spec/**/*.js'],
  testRequire: [
    yeoman.app + '/bower_components/angular/angular.js',
    yeoman.app + '/bower_components/angular-mocks/angular-mocks.js',
    yeoman.app + '/bower_components/angular-resource/angular-resource.js',
    yeoman.app + '/bower_components/angular-cookies/angular-cookies.js',
    yeoman.app + '/bower_components/angular-sanitize/angular-sanitize.js',
    yeoman.app + '/bower_components/angular-route/angular-route.js',
    'test/mock/**/*.js',
    'test/spec/**/*.js'
  ],
  karma: 'karma.conf.js',
  views: {
    main: yeoman.app + '/index.html',
    files: [yeoman.app + '/views/**/*.html']
  }
};

////////////////////////
// Reusable pipelines //
////////////////////////

var lintScripts = lazypipe()
  .pipe($.jshint, '.jshintrc')
  .pipe($.jshint.reporter, 'jshint-stylish');

var styles = lazypipe()
  .pipe($.sass, {
    outputStyle: 'expanded',
    precision: 10
  })
  .pipe($.autoprefixer, 'last 1 version')
  .pipe(gulp.dest, '.tmp/styles');

///////////
// Tasks //
///////////

gulp.task('styles', function () {
  return gulp.src(paths.styles)
    .pipe(styles());
});

gulp.task('lint:scripts', function () {
  return gulp.src(paths.scripts)
    .pipe(lintScripts());
});

gulp.task('clean:tmp', function (cb) {
  rimraf('./.tmp', cb);
});

gulp.task('start:client', ['start:server', 'styles'], function () {
  openURL('http://localhost:9000');
});

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, opt){
      return [['/bower_components', 
               connect["static"]('./bower_components')]]
    }
  });
});

gulp.task('start:server:test', function() {
  $.connect.server({
    root: ['test', yeoman.app, '.tmp'],
    livereload: true,
    port: 9001,
    middleware:function(connect, opt){
      return [['/bower_components', 
               connect["static"]('./bower_components')]]
    }
  });
});

gulp.task('watch', function () {
  $.watch(paths.styles)
    .pipe($.plumber())
    .pipe(styles())
    .pipe($.connect.reload());

  $.watch(paths.views.files)
    .pipe($.plumber())
    .pipe($.connect.reload());

  $.watch(paths.scripts)
    .pipe($.plumber())
    .pipe(lintScripts())
    .pipe($.connect.reload());

  $.watch(paths.test)
    .pipe($.plumber())
    .pipe(lintScripts());

  gulp.watch('bower.json', ['bower']);
});

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

gulp.task('serve:prod', function() {
  $.connect.server({
    root: [yeoman.dist],
    livereload: true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
               connect["static"]('./bower_components')]]
    }
  });
});

gulp.task('test', ['start:server:test'], function () {
  var testToFiles = paths.testRequire.concat(paths.scripts, paths.test);
  return gulp.src(testToFiles)
    .pipe($.karma({
      configFile: paths.karma,
      action: 'watch'
    }));
});

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

///////////
// Build //
///////////

gulp.task('clean:dist', function (cb) {
  rimraf('./dist', cb);
});

gulp.task('client:build', ['html', 'styles'], function () {
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');

  return gulp.src(paths.views.main)
    .pipe($.useref({searchPath: [yeoman.app, '.tmp']}))
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.minifyCss({cache: true}))
    .pipe(cssFilter.restore())
    .pipe($.rev())
    .pipe($.revReplace())
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('html', function () {
  return gulp.src(yeoman.app + '/views/**/*')
    .pipe(gulp.dest(yeoman.dist + '/views'));
});

gulp.task('images', function () {
  return gulp.src(yeoman.app + '/images/**/*')
    .pipe($.cache($.imagemin({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })))
    .pipe(gulp.dest(yeoman.dist + '/images'));
});

gulp.task('copy:extras', function () {
  return gulp.src(yeoman.app + '/*/.*', { dot: true })
    .pipe(gulp.dest(yeoman.dist));
});

gulp.task('copy:fonts', function () {
  return gulp.src(yeoman.app + '/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

gulp.task('build', ['clean:dist'], function () {
  runSequence(['images', 'copy:extras', 'copy:fonts', 'client:build']);
});

gulp.task('default', ['build']);

Thanks @cristianhoyos66 your code done the job ;)

correct the bower task to

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

I'm currently teaching myself angular and was curious on why does @cristianhoyos66 gulpfile work - the changes are logical:

• bower task should be added to serve task
• directory for bower is not /app/bower_components but /bower_components
• expose /bower_components path via middleware, so that angular scripts will be found and included

There are some changes that should be made - all the paths in testRequire should have yeoman.app dropped, but as we're not running tests at the moment, this works.

I can't understand however why the change from yeoman.app + '/views' to yeoman.app (and why changing it back after running gulp serve once still makes this work?). Can you please explain it?

In my case , I fixed it by making two changes .bowerrc

{
  "directory": "app/bower_components"
}

gulpfile.js

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

rerun bower install and gulp bower

Thank you so much, devcolt!!! How can this bug STILL be in the Yeoman generator???