yeoman / yeoman.io

Yeoman website
http://yeoman.io
790 stars 381 forks source link

problems with bower in using the generator-angular through yo #569

Closed BenReilly closed 8 years ago

BenReilly commented 8 years ago

So this is not running as I would expect, nor as the tutorial suggests. Through some research I've found some solutions, but they've only got me so far. Following the tutorial as written doesn't work at all. I finally got the packages I needed installed by using

npm install -g grunt-cli bower yo generator-karma generator-angular

So I can make it to this point with no errors, but after running yo angular the bower_components are never installed. Screen shots below

So the rest of this is copy paste from my console. I'm running Windows 7 64-bit using Cmder for the console. Node/package versions are in the paste:

C:\_dev
λ node --version && npm --version && yo --version && bower --version && grunt --version
v4.2.2
3.4.1
1.5.0
1.6.5
grunt-cli v0.1.13

C:\_dev
λ yo
? 'Allo! What would you like to do? (Use arrow keys)
  Run a generator
> Angular
  Karma
  ──────────────
  Update your generators
  Install a generator
  Find some help
  Get me out of here!
  ──────────────

I chose "Get me out of here!" at this point as I was just ensuring that generator-angular and generator-karma were installed.

C:\_dev
λ mkdir yoapp && cd yoapp

C:\_dev\yoapp
λ yo angular

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
? Which modules would you like to include? (Press <space> to select)
>(*) angular-animate.js
 ( ) angular-aria.js
 (*) angular-cookies.js
 (*) angular-resource.js
 ( ) angular-messages.js
 (*) angular-route.js
 (*) angular-sanitize.js
 (*) angular-touch.js

I hit Enter with the above configuration. A short time into the run, errors start to appear. I'm cutting out all non-error messages below. [note: did have to overwrite package.json -- which the tutorial suggests is a temporary error, and is the advice it gives]

 bower ENORESTARGET  No tag found that was able to satisfy ^3.2.0

Additional error details:
loadDep:grunt-legacy-log  ▀ ╢██████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟ grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide
...
├── UNMET PEER DEPENDENCY jasmine-core@*
...
├── UNMET PEER DEPENDENCY karma@^0.13.0 || >= 0.14.0-rc.0
...
├── UNMET PEER DEPENDENCY phantomjs@>=1.9
...
npm WARN EPEERINVALID karma-phantomjs-launcher@0.2.1 requires a peer of karma@>=0.9 but none was installed.
npm WARN EPEERINVALID karma-phantomjs-launcher@0.2.1 requires a peer of phantomjs@>=1.9 but none was installed.

npm WARN EPEERINVALID grunt-karma@0.12.1 requires a peer of karma@^0.13.0 || >= 0.14.0-rc.0 but none was installed.
npm WARN EPEERINVALID karma-jasmine@0.3.6 requires a peer of jasmine-core@* but none was installed.

C:\cmder/vendor/clink-completions/npm_prompt.lua:11: attempt to concatenate local 'package_version' e) nil valu
C:\_dev\yoapp {git}{hg}
{lamb}

Note that the command prompt in Cmder (the shell program I am using) should be a lambda: λ and after running "yo angular" it changes to {lamb}, but only inside the C:_dev\yoapp folder. Moving up or down one level in the directory structure restores it to normal.

The example scaffold in the tutorial does not match what I get (see screen_shot_1.jpg). Screen shots 2 and 3 are just to show some of what I pasted above into context. screen_shot_1 screen_shot_2 screen_shot_3

Last but not least, here's the info output that has been requested:

C:_dev\yoapp {git}{hg} {lamb} yo --version && echo %PATH% %NODE_PATH% && node -e "console.log(process.platform, process.versions)" && type Gruntfile.js 1.5.0 C:\cmder\bin;C:\Program Files\Git\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\share\vim\vim74;C:\cmder\vendor\conemu-maximus5;C:\cmder\vendor\conemu-maximus5\ConEmu;C:\ProgramData\Oracle\Java\javapath;C:\Ruby193\bin;C:\RailsInstaller\Ruby1.9.3\bin;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\OEM\12.0\DLLShared\;C:\Program Files (x86)\Roxio\OEM\AudioCore\;c:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;c:\Program Files\Microsoft SQL Server\100\Tools\Binn\;c:\Program Files\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files\Sublime Text 2;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Calibre2\;C:\Program Files (x86)\Google\Google Apps Sync\;C:\Program Files (x86)\Google\Google Apps Migration\;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\QuickTime Alternative\QTSystem\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\eehlers\AppData\Roaming\npm;C:\Ruby193\bin;C:\cmder %NODE_PATH% win32 { http_parser: '2.5.0', node: '4.2.2', v8: '4.5.103.35', uv: '1.7.5', zlib: '1.2.8', ares: '1.10.1-DEV', icu: '56.1', modules: '46', openssl: '1.0.2d' } // Generated on 2015-11-22 using generator-angular 0.14.0 'use strict';

// # Globbing // for performance reasons we're only matching one level down: // 'test/spec/{,/}.js' // use this if you want to recursively match all subfolders: // 'test/spec/*/.js'

module.exports = function (grunt) {

// Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt);

// Automatically load required Grunt tasks require('jit-grunt')(grunt, { useminPrepare: 'grunt-usemin', ngtemplates: 'grunt-angular-templates', cdnify: 'grunt-google-cdn' });

// Configurable paths for the application var appConfig = { app: require('./bower.json').appPath || 'app', dist: 'dist' };

// Define the configuration for all the tasks grunt.initConfig({

// Project settings
yeoman: appConfig,

// Watches files for changes and runs tasks based on the changed files
watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
  js: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
    tasks: ['newer:jshint:all', 'newer:jscs:all'],
    options: {
      livereload: '<%= connect.options.livereload %>'
    }
  },
  jsTest: {
    files: ['test/spec/{,*/}*.js'],
    tasks: ['newer:jshint:test', 'newer:jscs:test', 'karma']
  },
  styles: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
    tasks: ['newer:copy:styles', 'postcss']
  },
  gruntfile: {
    files: ['Gruntfile.js']
  },
  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= yeoman.app %>/{,*/}*.html',
      '.tmp/styles/{,*/}*.css',
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
    ]
  }
},

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>'
    }
  }
},

// Make sure there are no obvious mistakes
jshint: {
  options: {
    jshintrc: '.jshintrc',
    reporter: require('jshint-stylish')
  },
  all: {
    src: [
      'Gruntfile.js',
      '<%= yeoman.app %>/scripts/{,*/}*.js'
    ]
  },
  test: {
    options: {
      jshintrc: 'test/.jshintrc'
    },
    src: ['test/spec/{,*/}*.js']
  }
},

// Make sure code styles are up to par
jscs: {
  options: {
    config: '.jscsrc',
    verbose: true
  },
  all: {
    src: [
      'Gruntfile.js',
      '<%= yeoman.app %>/scripts/{,*/}*.js'
    ]
  },
  test: {
    src: ['test/spec/{,*/}*.js']
  }
},

// Empties folders to start fresh
clean: {
  dist: {
    files: [{
      dot: true,
      src: [
        '.tmp',
        '<%= yeoman.dist %>/{,*/}*',
        '!<%= yeoman.dist %>/.git{,*/}*'
      ]
    }]
  },
  server: '.tmp'
},

// Add vendor prefixed styles
postcss: {
  options: {
    processors: [
      require('autoprefixer-core')({browsers: ['last 1 version']})
    ]
  },
  server: {
    options: {
      map: true
    },
    files: [{
      expand: true,
      cwd: '.tmp/styles/',
      src: '{,*/}*.css',
      dest: '.tmp/styles/'
    }]
  },
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/styles/',
      src: '{,*/}*.css',
      dest: '.tmp/styles/'
    }]
  }
},

// Automatically inject Bower components into the app
wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//
  },
  test: {
    devDependencies: true,
    src: '<%= karma.unit.configFile %>',
    ignorePath:  /\.\.\//,
    fileTypes:{
      js: {
        block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
          detect: {
            js: /'(.*\.js)'/gi
          },
          replace: {
            js: '\'{{filePath}}\','
          }
        }
      }
  }
},

// Renames files for browser caching purposes
filerev: {
  dist: {
    src: [
      '<%= yeoman.dist %>/scripts/{,*/}*.js',
      '<%= yeoman.dist %>/styles/{,*/}*.css',
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
      '<%= yeoman.dist %>/styles/fonts/*'
    ]
  }
},

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},

// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],
    patterns: {
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
    }
  }
},

// The following *-min tasks will produce minified files in the dist folder
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
//   dist: {
//     files: {
//       '<%= yeoman.dist %>/styles/main.css': [
//         '.tmp/styles/{,*/}*.css'
//       ]
//     }
//   }
// },
// uglify: {
//   dist: {
//     files: {
//       '<%= yeoman.dist %>/scripts/scripts.js': [
//         '<%= yeoman.dist %>/scripts/scripts.js'
//       ]
//     }
//   }
// },
// concat: {
//   dist: {}
// },

imagemin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/images',
      src: '{,*/}*.{png,jpg,jpeg,gif}',
      dest: '<%= yeoman.dist %>/images'
    }]
  }
},

svgmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>/images',
      src: '{,*/}*.svg',
      dest: '<%= yeoman.dist %>/images'
    }]
  }
},

htmlmin: {
  dist: {
    options: {
      collapseWhitespace: true,
      conservativeCollapse: true,
      collapseBooleanAttributes: true,
      removeCommentsFromCDATA: true
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>',
      src: ['*.html'],
      dest: '<%= yeoman.dist %>'
    }]
  }
},

ngtemplates: {
  dist: {
    options: {
      module: 'yoappApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

// ng-annotate tries to make the code safe for minification automatically
// by using the Angular long form for dependency injection.
ngAnnotate: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

// Replace Google CDN references
cdnify: {
  dist: {
    html: ['<%= yeoman.dist %>/*.html']
  }
},

// Copies remaining files to places other tasks can use
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: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

// Run some tasks in parallel to speed up the build process
concurrent: {
  server: [
    'copy:styles'
  ],
  test: [
    'copy:styles'
  ],
  dist: [
    'copy:styles',
    'imagemin',
    'svgmin'
  ]
},

// Test settings
karma: {
  unit: {
    configFile: 'test/karma.conf.js',
    singleRun: true
  }
}

});

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'connect:dist:keepalive']); }

grunt.task.run([
  'clean:server',
  'wiredep',
  'concurrent:server',
  'postcss:server',
  'connect:livereload',
  'watch'
]);

});

grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { grunt.log.warn('The server task has been deprecated. Use grunt serve to start a server.'); grunt.task.run(['serve:' + target]); });

grunt.registerTask('test', [ 'clean:server', 'wiredep', 'concurrent:test', 'postcss', 'connect:test', 'karma' ]);

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

grunt.registerTask('default', [ 'newer:jshint', 'newer:jscs', 'test', 'build' ]); };

C:\cmder/vendor/clink-completions/npm_prompt.lua:11: attempt to concatenate local 'package_version' (a nil value)

eddiemonge commented 8 years ago

The codelab needs to be updated and there is already a ton of these issues open on the generator-angular repo, which also needs to be updated. Closing as duplicate of those. Thanks for the detailed report though.