J'ai du mal à comprendre pourquoi je vois plusieurs "Aucun appel à définir" lorsque je tente de charger mon application angulaire. Eh bien, je sais qu'ils sont là parce que j'utilise enforeDefine: true, mais qu'est-ce qui ne va pas avec mon code? Que dois-je faire pour satisfaire le enforceDefine?

Les erreurs: entrez la description de l'image ici

Main.js

/*global require, requirejs */

'use strict';

requirejs.config({
  enforceDefine: true,
  paths: {
    angular:                ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular.min','../lib/angularjs/angular.min'],
    'angular-messages':     ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-messages.min','../lib/angularjs/angular-messages.min'],
    'angular-resource':     ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-resource.min','../lib/angularjs/angular-resource.min'],
    'angular-ui-bootstrap': ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min','../lib/angular-ui-bootstrap/ui-bootstrap-tpls.min'],
    uiRouter:               ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-router/0.2.15/angular-ui-router.min','../lib/angular-ui-router/angular-ui-router.min'],
    bootstrap:              ['//cdn.jsdelivr.net/webjars/org.webjars/bootstrap/3.3.4/bootstrap.min','../lib/bootstrap/js/bootstrap.min'],
    jquery:                 ['//cdn.jsdelivr.net/webjars/org.webjars/jquery/2.1.4/jquery.min','../lib/jquery/jquery.min'],
    async:                  '../lib/requirejs-plugins/src/async'
  },
  shim: {
    angular: {
      exports : 'angular'
    },
    uiRouter: {
      deps: ['angular']
    },
    'angular-ui-bootstrap': {
      deps: ['angular']
    },
    'angular-resource': {
      deps: ['angular']
    },
    'angular-messages': {
      deps: ['angular']
    },
    bootstrap: {
      deps: ['jquery'],
      exports: 'jQuery.fn.popover'
    }
  },
  deps: ['app']
});

App.js

/*global require, requirejs */

'use strict';

define(['angular',
        './controllers',
        './directives',
        './filters',
        './services',
        'bootstrap',
        'jquery',
        'uiRouter',
        'angular-ui-bootstrap',
        'angular-messages',
        'angular-resource',
        'async',
        './gmaps'
        ],
  function(angular, controllers) {

    // Declare app level module which depends on filters, and services
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.router', 'ngMessages','ngResource','ui.bootstrap']).
      config(['$stateProvider','$urlRouterProvider','$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {

            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];

            $urlRouterProvider.otherwise('/home');

            $stateProvider

                // HOME STATES AND NESTED VIEWS ========================================
                .state('home', {
                    url: '/home',

                   .... several routes here that I hid

                });

        }]).controller('RouteCtrl', ['$scope','$state', function($scope, $state) {
            $scope.$state = $state;
        }]);

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

});
0
Daniel 16 juil. 2015 à 00:29

2 réponses

Meilleure réponse

De ceci (c'est moi qui souligne):

enforceDefine: s'il est défini sur true, une erreur sera générée si un script se charge qui n'appelle pas define() ou dont la valeur de chaîne d'exportation shim peut être vérifiée .

Le script chargé doit donc soit être conforme à AMD (Angular ne le fait pas), soit définir un exports dans sa configuration de shim.

Puisque main vous appartient, faites-en un module AMD approprié. Le "problème" est que les autres scripts (uiRouter, angular-ui-bootstrap, angular-resource, angular-messages) n'exportent en fait rien. Ma suggestion est simplement de réexporter angular (ou tout autre global, par exemple document, mais angular semble plus pertinent) afin que vous satisfassiez RequireJS:

requirejs.config({
    ...
    'angular-resource': {
        deps: ['angular'],
        exports: 'angular'
    }, // and so on...
    ...
});

Ceci est un contournement, mais je ne pense pas qu’il y ait d’autre moyen, si vous insistez pour utiliser enforceDefine.

1
Nikos Paraskevopoulos 16 juil. 2015 à 08:38

Vous devrez peut-être changer le require dans le script que vous spécifiez comme étant data-main pour qu'il devienne un define à la place. Il y a eu un problème sur GitHub qui ressemble à ce que vous rencontrez.

L'auteur de la bibliothèque suggère que si vous utilisez l'indicateur enforceDefine, votre module data-main devrait également utiliser un define.

0
miqh 16 juil. 2015 à 00:30