can't get requirejs, angularjs and almond to work together

Question

I've been struggling with this all day, it seems like I'm the only one with this problem.

everything works perfectly before compiling and even by compiling without setting:

almond: true,
wrap: true,

And even with these settings grunt still works without an error. But angular never gets bootstrapped! If I try to manually bootstrap it in the console through:

angular.bootstrap(document, ['wtvApp']);

It returns

Error: [$injector:modulerr] Failed to instantiate module wtvApp due to: Error: [$injector:nomod] Module 'wtvApp' is not available!

I would like to be able to serve a single file instead of:

<script data-main="scripts/main" src="components/requirejs/require.js"></script>

my grunt.js config: (some paths where removed to simplify)

requirejs: {
  dist: {
    options: {
      baseUrl: 'app/scripts',
      name: '../components/almond/almond.js',
      include: ['main.js'],
      out: 'dist/scripts/main.js',
      mainConfigFile: "app/scripts/main.js",
      optimize: 'uglify2',
      generateSourceMaps: true,
      preserveLicenseComments: false,
      useStrict: true,
      wrap: true,
      almond: true,
      findNestedDependencies: true
    }
  }
},

main.js

require.config({
paths: {
    jquery: '../components/jquery/dist/jquery',
    angular: '../components/angular/angular',
    modernizr: "../components/foundation/js/vendor/custom.modernizr",
    async: "../components/async/lib/async",
    underscore: "../components/underscore/underscore",
    gapi: "https://apis.google.com/js/client.js?onload=load",
    foundation:  '../components/foundation/js/foundation/foundation',
    foundationDatePicker: '../components/foundation-datepicker/js/foundation-datepicker',
    ngCookies: '../components/angular-cookies/angular-cookies',
    ngSanitize: '../components/angular-sanitize/angular-sanitize',
    ngRoute: '../components/angular-route/angular-route',
    services: '../scripts/services',
    fixedservices: '../scripts/fixedservices',
    controllers: '../scripts/controllers',
    filters: '../scripts/filters',
    resources: '../scripts/resources',
    animations: '../scripts/animations',
    directives: '../scripts/directives',
    wtvApp: '../scripts/app',
},
shim: {
    jquery: {
        exports: '$'
    },
    angular: {
      deps: ['jquery'],
      exports: 'angular'
    },
    modernizr: { deps: ['jquery'] },
    async: {
      exports: 'async'
    },
    underscore: {
      exports: '_'
    },
    foundation: { deps: ['jquery', 'modernizr'] },
    foundation_orbit: { deps: ["foundation"] },
    foundationDatePicker: { deps: ["foundation"] },
    dante: { deps: ["jquery", "underscore", "sanitize"] },
    ngCookies: { deps: ['angular'] },
    ngSanitize: { deps: ['angular'] },
    ngRoute: { deps: ['angular'] },
    ngResource : { deps: ['angular'] },
    ngAnimate : { deps: ['angular'] },
    snap: { deps: ['angular'] },
    ngSnap: { deps: ['angular', 'snap'] },
    wtvApp: { deps: ['angular', 'foundation', 'ngCookies', 'ngSanitize', 'ngRoute', 'ngResource', 'ngAnimate' ] },
},
priority: [
    'jquery',
    'angular'
]
});

window.name = "NG_DEFER_BOOTSTRAP!";

define([
'jquery',
'angular',
'async',
'modernizr',
'underscore',
'gapi',
'wtvApp',
],
function ($, angular, async, modernizr,underscore) {
    'use strict';
    //when everything is loaded run wtvApp
    $( document ).ready(function() {
        angular.bootstrap(document, ['wtvApp']);
    });
}
);

app.js

'use strict';

define('wtvApp',['jquery',
    'angular',
    'async',
    ], function () {

      var wtvApp = angular.module( 'marketApp', [
        'ngRoute', 
        'ngAnimate'
      ]);

      wtvApp.config(
        ['$routeProvider',
        function ($routeProvider) {

          $locationProvider
            .html5Mode(true)
            .hashPrefix('!');


          $routeProvider 

            //CART
            .when('/cart',{
              templateUrl: 'views/frontdesk/cart.html',
            })
            .when('/card',{
              templateUrl: 'views/frontdesk/card.html',
            })

            //REDIRECT TO HOME
            .otherwise({
              redirectTo: '/'
            });

        }]);

      wtvApp.run(['$route', '$location', '$rootScope', function ($route, $location, $rootScope) {

        $rootScope.$on('$viewContentLoaded', function () {
          $(document).foundation();
        });

      }])


      return wtvApp;

 });

Answer 1

solved it!!!

requirejs: {
  dist: {
    options: {
      baseUrl: 'app/scripts',
      include: ['main.js'],
      out: 'dist/scripts/main.js',
      mainConfigFile: "app/scripts/main.js",
      optimize: "uglify2",
      preserveLicenseComments: false,
      generateSourceMaps: true,
      useStrict: true,
      almond: true,
      wrap: true,
      insertRequire: ['main.js'], // <-- added this
      findNestedDependencies: true
    }
  }
},

Answer 2

You define :

angular.module( 'marketApp', [

And Bootstrap :

angular.bootstrap(document, ['wtvApp']);

angular.bootstrap take a DOM node and the name of your module. You should do bootstrap as follow :

angular.bootstrap(document, ['marketApp']);

Answer 3

After much deliberation I finally found out how to make it work the way that I wanted it to.

requirejs:         {
        compile: {
            options: {
                baseUrl:                 '.',
                out:                     distDir + 'js/production.js',
                name:                    bowerDir + 'almond/almond',
                include:                 'main',
                mainConfigFile:          'main.js', // Ensures paths specified in requirejs.config are available
                optimize:                'uglify2', // none / uglify2
                uglify2: {
                    //Example of a specialized config. If you are fine
                    //with the default options, no need to specify
                    //any of these properties.
                    output: {
                        beautify: false // switch to true to see the full output
                    },
                    compress: {
                        sequences: false,
                        global_defs: {
                            DEBUG: false
                        }
                    },
                    warnings: true,
                    mangle: false // THIS is the main culprit as this does mess with angular modules
                },
                preserveLicenseComments: false,
                generateSourceMaps:      true,
                useStrict:               true,
                almond:                  true,
                wrap:                    true,
                insertRequire:           ['main'], // <-- added this
                findNestedDependencies:  true
            }
        }
    },