ReferenceError: angular is not defined Yeoman

Question

When I run "grunt serve", I get "ReferenceError: angular is not defined". Here is my app.js and index.html. I tried to run "bower update", "bower install" but didn't work.

/client/app/app.js

'use strict';

 angular.module('contactsServerApp', [
 'ngCookies',
 'ngResource',
 'ngSanitize',
 'btford.socket-io',
 'ui.router',
 'ui.bootstrap'
])

index.html ( part)

    <!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<script src="socket.io-client/socket.io.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,client}) app/app.js -->
<script src="app/app.js"></script>
<!-- injector:js -->
<script src="app/account/account.js"></script>
<script src="app/account/login/login.controller.js"></script>
<script src="app/account/settings/settings.controller.js"></script>
<script src="app/account/signup/signup.controller.js"></script>
<script src="app/admin/admin.controller.js"></script>
<script src="app/admin/admin.js"></script>
<script src="app/main/main.controller.js"></script>
<script src="app/main/main.js"></script>
<script src="components/auth/auth.service.js"></script>
<script src="components/auth/user.service.js"></script>
<script src="components/modal/modal.service.js"></script>
<script src="components/mongoose-error/mongoose-error.directive.js"></script>
<script src="components/navbar/navbar.controller.js"></script>
<script src="components/socket/socket.service.js"></script>
<!-- endinjector -->
<!-- endbuild -->

When I run "grunt serve"

$ grunt serve
Running "serve" task

Running "clean:server" (clean) task

Running "env:all" (env) task

Running "concurrent:server" (concurrent) task

Running "injector:scripts" (injector) task
Missing option `template`, using `dest` as template instead
Injecting js files (14 files)

Running "injector:css" (injector) task
Missing option `template`, using `dest` as template instead
Injecting css files (5 files)

Running "wiredep:target" (wiredep) task
client/index.html modified.

Running "autoprefixer:dist" (autoprefixer) task

Running "express:dev" (express) task
Starting background Express server
Debugger listening on port 5858
e:\ContactDocuments\Backend\client\app\app.js:3
angular.module('contactsServerApp', [
^

ReferenceError: angular is not defined
at Object.<anonymous> (e:\ContactDocuments\Backend\client\app\app.js:3:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3

Running "wait" task
>> Waiting for server reload...
Done waiting!

Running "open:server" (open) task

Running "watch" task
Waiting...

Do you have an idea about this error?

Answer 1

1. Change "bower_components" to "app/bower_components" in .bowerrc then run 'bower install' again.
2. Add defer tags to the script files.
3. Alternatively You can use CDN links.

---

The bower command is not being run with gulp. You can add the it to the gulp file as,

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