grunt build not populating vendor.js

[JaKXz]

I've been trying to deploy my app to heroku using the given steps, but unfortunately, my dist/public/scripts/*.vendor.js is completely empty (and as a result I get this error: Uncaught ReferenceError: angular is not defined 5ee656d2.scripts.js:1). I took the code block below from my index.html and I haven't modified my Gruntfile since generating the project. What am I missing?

One thing to note: I did start the project with just the yeoman angular generator, and then merged in the angular-fullstack later on... my app works fine locally, but is that where the issue is coming from?

<!-- build:js scripts/vendor.js -->
<!-- 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-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-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->

What would be really cool is if components like angular could have a CDN url specified in production, with these files being the fallback.

[JaKXz]

I'm not great with Grunt, but here's my Gruntfile, I'd appreciate tips on what I might be missing.

[DaftMonk]

I'll need the console log after running the grunt build task to be able to help.

[JaKXz]

@DaftMonk Updated my gist, here's the output.

[DaftMonk]

Hmm, there doesn't seem to be anything obviously wrong with the log. Could you check that the '.tmp/concat/scripts/vendor.js' file is not empty?

[JaKXz]

@DaftMonk it's empty as well.

[DaftMonk]

Ah now I see the problem.

app/views/bower_components/angular-resource/angular-resource.js

Its looking for app/views/bower_components, it should be app/bower_components.

This is because the angular generator has a slightly different file structure, so the usemin paths in their index.html are different.

Change your build tags to:

<!-- build:css(app) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->

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

[JaKXz]

@DaftMonk Thanks, that worked.

[skrobul]

I also had the same problem, following upgrade of grunt-bower-install to 1.4.0. Unfortunately my tags were as listed above and it still created empty file. After some playing around I figured out that removing '(app)' resolves the problem. My current blocks look as follows:

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

     <!-- build:js({.tmp,app}) scripts/scripts.js -->
     <!-- endbuild -->

[dei79]

On my app I needed to switch to

<!-- build:js(app/..) scripts/vendor.js -->

because my bwoer_compents dir is per default in /bower_components.

So any explainations what I did wrong?

[JaKXz]

@dei79 what are the contents of your .bowerrc file?

[AnalogWeapon]

I had the exact same problem as @dei79 and switching to <!-- build:js(app/..) scripts/vendor.js --> was what I had to do as well. This is from a default yo angular setup with no modifications. The contents of my .bowerrc file is just:

{
    "directory": "bower_components"
}

[dei79]

This is the content of my bowerrc

{
  "directory": "bower_components"
}

I tried also other locations e.g. app/bower_components but this ends up with a corrupt path in the index.html

[pavgup]

This problem still exists, but the solution is now to not include (app) in the build tags, but to instead include (./) in the build tags. And this fix is required for both the vendor.js and vendor.css files. The updated tags in index.html would then look like:

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

AND

<!-- build:css(./) styles/vendor.css -->
<!-- bower:css -->
...
<!-- endbower -->
<!-- endbuild -->

Looks like this issue is still open, but the fix is no big deal.

[jrmlstf]

The problem comes from the last release where the bower_components directory has been moved the /project_root directory (see https://github.com/yeoman/generator-angular/blob/master/CHANGELOG.md#breaking-changes).

A quick and simple patch is to add the /project_root directory as an alternate path to the vendor.js useminPrepare block. @dei79 's <!-- build:js(app/..) scripts/vendor.js --> patch works just fine. Personally, I used <!-- build:js(.) scripts/vendor.js -->.

[tiste]

@jrmlstf works for me 👍

[lauborges]

<!-- build:js(app/..) scripts/vendor.js --> 

also works for me

[jneale]

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

This worked for me.

[bcmdev]

tried above but still had issues with main.css. What worked finally was following:

for styles
<!-- build:css({.tmp,./}) styles/vendor.css -->
<!-- build:css({.tmp,app}) styles/main.css -->

for scripts

<!-- build:js({.tmp,./}) scripts/vendor.js -->


[wikett]

Hello,
I have created an angular-generator-fullstack and deployed on Heroku (and working) but when I try to add some module (like ´ui.bootstrap´) doesn´t work on Heroku.

I have update my index.html with:

<!-- build:css(app) styles/vendor.css -->

...
and

<!-- build:js(app) scripts/vendor.js -->

and if I run: << grunt serve:dist works

but when I try to deploy on Heroku I dont know what happen, but doesnt work. I have my vendor.css and vendor.js empty (this is the url: http://eahtest.herokuapp.com/ )

Thank you in advance!!

[AnalogWeapon]

@wikett have you tried the approaches mentioned above? Try this:

<!-- build:js(./) scripts/vendor.js --> and <!-- build:css(./) scripts/vendor.css -->

[wikett]

@AnalogWeapon I have tried your approach but doesnt work :S

[madskonradsen]

Same issue here, with the newest version of generator-angular
<!-- build:js(app/..) scripts/vendor.js --> worked, but should not be necessary, so i guess the ticket should be reopened...

[DaftMonk]

@madskonradsen Could you explain your specific issue a bit more? Are you using 2.0 of the angular-fullstack generator?

[madskonradsen]

@DaftMonk Oh yeah, sorry! my vendor.js-file comes out empty when i run "grunt build"

[bestconsultant]

The
and
approach worked for me as well.

(I was using generator-angular 0.9.0-1...)

[madskonradsen]

I'm sorry! I thought that generator-angular was updated to the new version... It worked perfectly after updating...

[stephaneeybert]

I have the same issue. The generated vendor.js file is blank.

I did a gist https://gist.github.com/stephaneeybert/ada08c9917fad44a8e38

[kingcody]

@stephaneeybert you should update the generator: npm update -g generator-angular-fullstack

There is a much newer version :)

[kingcody]

@stephaneeybert and while you're at it you'll probably want to run npm update -g yo grunt bower just to be safe. Wouldn't hurt to get the newest versions. I know that the newest version of generator-angular-fullstack requires yo@1.2.0

[stephaneeybert]

@kingcody I did and it went fine, somewhat silent.
stephane@stephane-ThinkPad-X60:nitro-project> npm update -g generator-angular-fullstack
stephane@stephane-ThinkPad-X60:nitro-project>

On the other hand the second command was very verbose.
npm update -g yo grunt bower

I then ran a grunt build again, only to have the same issue.

Thanks anyway for the updating tip.

[MarkPieszak]

I was also getting the "Uncaught ReferenceError: angular is not defined" after trying to set everything up, but doing a quick "grunt build" fixed it. Now everything is working!

My question is, I won't have to constantly enter this command in correct? (Let's say I'm adding some new files / etc)

[kaushik-evani]

I spent lots and lots of frustrated days because of this. I am using generator-angular-fullstack version 3.0.2. For me the css files in the routes were getting loaded fine
(i.e. <!-- build:css({.tmp,client}) app/app.css -->), but the vendor.css was empty. Bootstrap and font-awesome were not getting loaded. Original line which was buggy was
<!-- build:css({client}) app/vendor.css -->
And for me it worked after I changed it to,
<!-- build:css({.tmp,client}) app/vendor.css -->
This small thing was not easy to find though. Found a lot of help in this thread. Cheers everyone! I can sleep in peace.

[cappi10]

I have spent a day on this as well on version 3.1.1. If anyone still has this problem see if you have a space between: <!-- build:jsSpace({.tmp,assets}) js/scripts.js -->. It will not work with a space there.