Search code examples
javascriptangularjsgruntjsrequirejsalmond

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


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;

 });

Solution

  • 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
        }
      }
    },