手動引導Angular有時無法加載頁面

Question

我在我的Angular項目上使用RequireJS並在require.config文件中執行手動引導。我的問題是，每當我重新加載頁面時，它有時會拋出一個關於模塊不可用的錯誤。它不會一直髮生，所以它看起來像是一個時間問題。

main.js

'use strict'; 

require.config({ 
paths: { 
    angular: '/lib/angular/angular', 
    angularAnimate: '/lib/angular-animate/angular-animate', 
    angularResource: '/lib/angular-resource/angular-resource', 
    angularUiRouter: '/lib/angular-ui-router/release/angular-ui-router', 
    angularTranslate: '/lib/angular-translate/angular-translate', 
    angularTranslateLoader: '/lib/angular-translate-loader-static-files/angular-translate-loader-static-files', 
    angularMocks: '/lib/angular-mocks/angular-mocks', 
    angularBootstrap: '/lib/angular-bootstrap/ui-bootstrap-tpls', 
    jquery: '/lib/jquery/jquery', 
    lodash: '/lib/lodash/dist/lodash', 
    angularBreadcrumb: '/lib/angular-breadcrumb/dist/angular-breadcrumb', 
    datatables: '/lib/datatables/media/js/jquery.dataTables', 
    datatablesColreorder: '/lib/datatables-colreorder/js/dataTables.colReorder' 
}, 
shim: { 
    angular: {'exports' : 'angular'}, 
    angularAnimate: ['angular'], 
    angularResource: ['angular'], 
    angularUiRouter: ['angular'], 
    angularTranslate: ['angular'], 
    angularTranslateLoader: ['angular'], 
    angularMocks: ['angular'], 
    angularBreadcrumb: ['angular'], 
    angularBootstrap: ['angular'], 
    datatables: ['jquery'], 
    datatablesColreorder: ['datatables'], 
    jqueryUi: ['jquery'] 
}, 
priority: [ 
    "angular" 
] 
}); 

require([ 
'angular', 
'app', 
//For mocking backend 
'mockSetup' 
], function(angular, app) { 
console.log('main'); 
angular.element().ready(function() { 
    //TODO remove on production, this is a hack to get around loading order issue which only happens when DEV TOOLS is open 
    setTimeout(function() { 
     console.log('resume bootstrap'); 
     angular.bootstrap(document, ['app']); 
    }, 200); 
}); 
}); 

app.js

'use strict'; 

define([ 
'angular', 
'config', 
'routes', 
'filters', 
'directives', 
'controllers', 
'angularResource', 
'angularUiRouter', 
'angularBreadcrumb', 
'angularTranslate', 
'angularTranslateLoader', 
'angularBootstrap', 
'directives/customer/customerLocations', 
'directives/customer/customerContact', 
'directives/customer/customerContacts', 
'directives/customer/customerContracts', 
'directives/customer/customerAccounts', 
'directives/customer/customerOrders', 
'directives/header', 
'directives/srPattern', 
'directives/srMaxLength', 
'directives/datatable', 
'directives/datatableWithTitlebar', 
'directives/ebCombobox', 
'services/customerModel', 
'services/searchModel', 
'services/searchSchemaModel', 
'services/accessModel', 
'services/confirmationDialog' 
], function (angular) { 

    // Declare app level module which depends on filters, and services 

    var app = angular.module('app', [ 
     'ui.bootstrap', 
     'ngResource', 
     'ncy-angular-breadcrumb', 
     'pascalprecht.translate', 
     'app.config', 
     'app.routes', 
     'app.filters', 
     'app.services', 
     'app.directives', 
     'app.controllers' 
    ]); 

    app.config(['$translateProvider', function($translateProvider) { 
     $translateProvider.useStaticFilesLoader({ 
      prefix: 'i18n/locale-', 
      suffix: '.json' 
     }); 
     $translateProvider.preferredLanguage('en'); 
    }]); 
    return app; 
}); 

Answer 1

Here you've got Requirejs with AngularJS sample app

使用的那一個，我從來沒有注意到你所描述的問題。

很難幫助你，因爲我們不知道你的整個環境和錯誤信息。