Question

I created an Asp.Net MVC and used nuget to add HotTowel (V2.0.1 of 9/11/2013). I created a couple of ViewModel, Models. However, I got the following error.

"Failed to load routed module (viewmodels/myVM). Details: Load timeout for modules: durandal/plugins/router\nhttp://requirejs.org/docs/errors.html#timeout"

Is it the problem of durandal/plugins/router? Or it can be caused by some code I added?

The error occurred at Scripts/durandal/system.js.

var logError = function(error) {
    if(error instanceof Error){
        throw error;
    }

    throw new Error(error);
};

The following is the VM code.

define(['services/datacontext', 'durandal/plugins/router', 'services/logger'],
// Remove the durandal/plugins/router and the functions will get rid of the error.
function (datacontext, router, logger) {
    var title = 'Event';
    var vm = {
        activate: activate,
        deactivate: deactivate,
        refresh: refresh,
        events: events,
        title: title
    };

    return vm;

    //#region Internal Methods
    var events = ko.observableArray();

    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return datacontext.getEventPartials(events);
    }

    var deactivate = function () {
        events([]);
    };

    var refresh = function () {
        return datacontext.getEventPartials(events, true);
    };

    //#endregion
});

The following is the call stack

logError [system.js] Line 92    Script
Anonymous function [router.js] Line 359 Script
[External Code] 
Anonymous function [system.js] Line 260 Script
[External Code] 
[Async Call]    
    ....

Code at router.js,

        isProcessing(true);
        router.activeInstruction(instruction);

        if (canReuseCurrentActivation(instruction)) {
            ensureActivation(activator.create(), currentActivation, instruction);
        } else {
            system.acquire(instruction.config.moduleId).then(function(module) {
                var instance = system.resolveObject(module);
                ensureActivation(activeItem, instance, instruction);
            }).fail(function(err){
                    system.error('Failed to load routed module (' + instruction.config.moduleId + '). Details: ' + err.message);
                });
        }
    }

And previous one in system.js.

    acquire: function() {
        var modules,
            first = arguments[0],
            arrayRequest = false;

        if(system.isArray(first)){
            modules = first;
            arrayRequest = true;
        }else{
            modules = slice.call(arguments, 0);
        }

        return this.defer(function(dfd) {
            require(modules, function() {
                var args = arguments;
                setTimeout(function() {
                    if(args.length > 1 || arrayRequest){
                        dfd.resolve(slice.call(args, 0));
                    }else{
                        dfd.resolve(args[0]);
                    }
                }, 1);
            }, function(err){
                dfd.reject(err);
            });
        }).promise();
    },
Was it helpful?

Solution

Based on the comments I'd recommend to modify the vm code slightly, so that all variables that are returned via vm are defined before use. In addition 'plugins/router' is used instead of 'durandal/plugins/router'.

define(['services/datacontext', 'plugins/router', 'services/logger'],
// Remove the durandal/plugins/router and the functions will get rid of the error.
function (datacontext, router, logger) {
    var title = 'Event';
    var events = ko.observableArray();
    var deactivate = function () {
        events([]);
    };
    var refresh = function () {
        return datacontext.getEventPartials(events, true);
    };

    var vm = {
        activate: activate,
        deactivate: deactivate,
        refresh: refresh,
        events: events,
        title: title
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return datacontext.getEventPartials(events);
    }
    //#endregion
});

BTW the name Internals methods is misleading as everything in that region is returned via vm. I prefer to work with named function instead, which get created before the return statement if they are returned and place them below the return statement in a Internal methods region if they are not returned.

define(['services/datacontext', 'plugins/router', 'services/logger'], 
function( datacontext, router, logger ) {
    var title = 'Event';
    var events = ko.observableArray();

    function deactivate () {
        events([]);
    }

    function refresh () {
        return datacontext.getEventPartials(events, true);
    }

    function activate () {
        logger.log(title + ' View Activated', null, title, true);
        return datacontext.getEventPartials(events);
    }

    return {
        activate: activate,
        deactivate: deactivate,
        refresh: refresh,
        events: events,
        title: title
    };

    //#region Internal Methods

    //#endregion
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top