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

使用那个，我从来没有注意到你描述的问题。

很难帮助你，因为我们不知道你的整个环境和错误信息。

手动bootstrap Angular有时不加载页面

1 个答案: