3

I built an app with Yeoman, using generator-angular-jade-stylus, and everything worked perfectly in the development version using grunt serve, not a single error in the console, but upon building the app with grunt serve:dist, my app turns into a blank page, with the following error in the console:

66e3c8ac.vendor.js:4 Uncaught Error: 
Failed to instantiate module monopolyApp due to:
Error: [$injector:nomod] Module 'monopolyApp' is not available! You 
either misspelled the module name or forgot to load it. If registering 
a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.15/$injector/nomod?p0=mon...
    at http://localhost:9000/scripts/66e3c8ac.vendor.js:4:12729
    at http://localhost:9000/scripts/66e3c8ac.vendor.js:4:20410
    at b (http://localhost:9000/scripts/66e3c8ac.vendor.js:4:19993)
    at http://localhost:9000/scripts/66e3c8ac.vendor.js:4:20305
    at http://localhost:9000/scripts/66e3c8ac.vendor.js:4:27065
    at Array.forEach (native)
    at f (http://localhost:9000/scripts/66e3c8ac.vendor.js:4:13059)
    at k (http://localhost:9000/scripts/66e3c8ac.vendor.js:4:27005)
    at Fa (http://localhost:9000/scripts/66e3c8ac.vendor.js:4:28542)
    at e (http://localhost:9000/scripts/66e3c8ac.vendor.js:4:18649)

What I have tried

I have done quite a bit of research on this error, and found a few fixes, but none of them worked for me...One of them mentioned that useminPrepare would minify the scripts, and then uglify would minify the scripts again, corrupting the scripts, and they said to remove uglify from the useminPrepare block to solve it. I tried this and it just gave me an error that it could not find the uglify task, and aborted.

I found another fix that said to change <!-- build:js scripts/vendor.js --> to <!-- build:js(app/..) scripts/vendor.js --> or <!-- build:js(./) scripts/vendor.js --> -- Using this method removed the errors from the console, but still left me with a blank page.

I have the module correctly attached to the body body(ng-app="monopolyApp") and this is how my module is defined in the app.js:

angular
  .module('monopolyApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'LocalStorageModule'
  ])

and in the controller (main.js) 

angular.module('monopolyApp')
  .controller('MainCtrl', function ($scope, $window, $timeout, localStorageService) {

I have also included the index.jade, app.js, and main.js in this gist for further reference. If any further information is needed to diagnose this error please let me know, but I have tried every fix I can find and nothing is working. Any help is appreciated. Thanks!

Elliot Tregoning
  • 213
  • 4
  • 16

1 Answers1

2

When you create an app with Yeoman it can include a module name in you Grunt file and your bower.json file. So look under your build task in Gruntfile.js for e.g.:

Gruntfile.js:
  372        dist: {
  373          options: {
  374:           module: 'sitesApp',

Change 'sitesApp' to whatever you're calling the app in your Angular code e.g. 'monopolyApp'

Eric Grotke
  • 4,651
  • 3
  • 21
  • 19
  • I'll try this next time, but it seemed to be a problem with the generator itself and not my code, because it gave the same error when I tried to publish an app with the default template it starts you out with. All I did was convert my stylus to css and jade to html manually and then ran it with the regular generator-angular and it worked just fine. I will consider this for the future. Upvoted for now, but I'll mark as correct answer as soon as I use the generator again and try it out. Thanks! – Elliot Tregoning Jul 08 '16 at 00:20