Durandal JS Widgets Minification issue with Grunt

Question

Wondered if anyone could shed a little more light on an issue I've experienced using Grunt to minify a DurandalJS project.

I'm getting a 404 error when the page displaying the widget is shown.

We added a new widget to a project that we were working on. All worked well in development but when we minified the project ahead of deployment to production the widget stopped working properly with a 404 error saying it could not load the view.

My suspicions were immediately raised that something was wrong with the way the widget HTML had been minified. all our widget names are camel cased.

I checked the grunt file which looked like this:

The grunt snippet relating to Durandal is below.

durandal: {
    main: {
        src: ['app/**/*.*', 'Scripts/durandal/**/*.{js, html}'],
        options: {
            name: 'requireLib',
            baseUrl: requireConfig.baseUrl,
            mainPath: 'app/main',
            loglevel: "verbose",
            include: ['widgets/myGreatWidget1/viewmodel',
                'widgets/myGreatWidget2/viewmodel',
                'widgets/myGreatWidget3/viewmodel',
                'widgets/myNewWidget/viewmodel'
            ],
            paths: mixIn({}, requireConfig.paths, { 
                'requireLib': '../Scripts/require' 
            }),
            exclude: ['jquery', 'knockout'],
            optimize: 'none',
            out: 'build/app/main.js'
        }
    }
},

The issue came with loading the widget view which was referenced in the parent view as follows:

<div data-bind="widget: { kind: 'myNewWidget' }"></div>

When this was minified by the grunt build process it became:

define('text!widgets/mygreatwidget/view.html', function() { 
    return "<div>Widget html</div>"; 
});

I've never paid detailed attention to the casing of the widgets until now as the fix/hack turned out to be ensuring that all widgets were of the form:

<div data-bind="widget: { kind: 'mynewwidget' }"></div>

Just wondering if there are any places I need to check to ensure that all cases are the same.

If anyone could supply places I should check so far I have:

1.) Grunt file process for durandal - show above.
2.) Widget file names. - This is view.html and viewModel.js
3.) Widget embed HTML - shown above.
4.) Widget class names - I'm using typescript and this is generating module namespaces which seemed consistent.

Any help gratefully received.

Durandal JS Widgets Minification issue with Grunt

0 Answers0