无法让 requirejs、angularjs 和 almond 一起工作

Question

我一整天都在为这个问题苦苦挣扎，好像只有我一个人有这个问题。

编译前一切正常，甚至在没有设置的情况下编译：

almond: true,
wrap: true,

即使使用这些设置，grunt 仍然可以正常运行。但是 angular 永远不会 bootstrapped！如果我尝试通过以下方式在控制台中手动 bootstrap 它：

angular.bootstrap（文档，['wtvApp']）；

它returns

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

我希望能够提供单个文件而不是：

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

我的 grunt.js 配置：（为了简化而删除了一些路径）

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

您定义：

angular.module( 'marketApp', [

和Bootstrap：

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

angular.bootstrap 取一个 DOM 节点和模块的 name。你应该 bootstrap 如下：

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

Answer 2

解决了！！！

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 3

经过深思熟虑，我终于找到了如何让它按照我想要的方式工作。

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

无法让 requirejs、angularjs 和 almond 一起工作

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

javascript

angularjs

gruntjs

requirejs

almond