grunt bowerInstall not working - angularjs

Question

I'm setting up a new AngularJS project (first time for me) and I'm finding it very touchy... Latest issue is getting bower to properly configure things in my index.html file.
If I just hardcode things to the googleapis, it all works just fine (example in the index.html file).
If I setup bower and do a grunt bowerInstall, it adds what look to be the correct lines in my index.html but they don't work at all. I get errors like:
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8081/bower_components/angular/angular.js".
and
Uncaught SyntaxError: Unexpected token < for the angular files.
So far bower has been a royal pain... any ideas what's going wrong here? Thanks!
BTW, the simple app is working as expected and I've gotten some basic karma tests working.
bower.json:
{
"name": "meanjs_book",
"version": "0.1.0",
"homepage": "https://github.com/JESii/xxx",
"authors": [
"Jon Seidel <jseidel#edpci.com>"
],
"description": "Rudimentary app from MeanJS Book",
"main": "server.js",
"moduleType": [
"node"
],
"keywords": [
"MongoDB",
"Express",
"AngularJS",
"Node",
"HighPlans"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"spec"
],
"dependencies": {
"angular-route": "~1.3.15",
"angular": "~1.3.15",
"angular-animate": "~1.3.15",
"angular-mocks": "~1.3.15"
}
}
Gruntfile
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
bowerInstall: {
target: {
// Point to the files that should be updated when
// you run `grunt bowerInstall`
src: ['public/app/views/index.html'], // index.html support
// Optional:
// ---------
cwd: '',
dependencies: true,
devDependencies: false,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
grunt.loadNpmTasks('grunt-bower-install');
};
index.html:
<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-mocks.js" type="text/javascript" charset="utf-8"></script>
<!-- bower:js -->
<!-- <script src="../../../bower_components/angular/angular.js" type="text/javascript"></script> -->
<!-- <script src="../../../bower_components/angular-route/angular-route.js" type="text/javascript"></script> -->
<!-- <script src="../../../bower_components/angular-animate/angular-animate.js" type="text/javascript"></script> -->
</script> -->

Answer 1

I'm assuming you're getting that error when running grunt serve. The console message you pasted indicates that grunt isn't allowing JS files through. If a particular file type isn't allowed, it's replaced with index.html which is why it was transferred with MIME type HTML. Where did you get that Gruntfile from?
Additionally, I recommend using Yeoman to scaffold a basic Angular app. Check it out here: http://yeoman.io/codelab.html. It's very easy to follow and will make you more comfortable with using tools like Grunt & Bower.