Yeoman搭建angular的坑:Uncaught ReferenceError: angular is not defined(…)

1. 问题

今天用yeoman搭建angular环境,搭建完成之后,执行操作:

gulp serve

页面老是报错:Uncaught ReferenceError: angular is not defined(…)

2. 操作步骤

npm install -g generator-angular
yo angular angular-in-action
cnpm install && bower install

这个时候执行gulp serve就会出现文章一开始说的问题。

打开index.html,可以如下代码,注意不能删除,这样页面才在哪放置 inject 数据流

  <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->   

3. 解决方法

3.1 为taskserve添加bower任务

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

3.2 修改bower输出路径

// 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)); //修改输出路径
});

3.3 拷贝bower_componentsapp目录下

重新执行

gulp serve

http://xhope.top/wp-content/uploads/2016/11/12.jpg
完成

issue:
https://github.com/yeoman/generator-angular/issues/1295
https://github.com/yeoman/generator-angular/issues/1299