URL to node_modules when using Aurelia KendoUI Bridge with ASP.NET MVC

Question

I'm trying to get the Kendo Grid loading correctly when using Aurelia-KendoUI Bridge with ASP.NET MVC. In the browser's network list I get three 404 errors:

localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid.js
localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/col.js
localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid-toolbar.js

The problem is the path to node_modules, which is located on root. Correct path would be this (without Home):

localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid.js
localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/col.js
localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid-toolbar.js

I installed Aurelia-CLI like this:
https://aurelia-ui-toolkits.gitbooks.io/kendo-ui-sdk-installation/content/installation/installing%20the%20bridge/requirejs.html
and using the grid based on this:
http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid-basic-use

I changed \aurelia_project\aurelia.json (line 56), to get correct path for app-bundle.js:

build/targets/
"useAbsolutePath": true

Content of ASP.NET MVC page View\Home\Grid.cshtml:

<div aurelia-app="main-grid">
    <script src="~/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>    
    <div class="message">Grid loading...</div>    
</div>

Content of \src\main-grid.js:

import environment from './environment';

Promise.config({
    longStackTraces: environment.debug,
    warnings: {
        wForgottenReturn: false
    }
});

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature('resources')
        .plugin('aurelia-dialog')
        .plugin('aurelia-kendoui-bridge', kendo => kendo.kendoGrid());

    if (environment.debug) {
        aurelia.use.developmentLogging();
    }

    if (environment.testing) {
        aurelia.use.plugin('aurelia-testing');
    }

    aurelia.start().then(() => aurelia.setRoot('grid/app'));
}

Content of \src\grid\app.js:

export class App {

    constructor() {
        this.datasource = {
            type: 'odata',
            transport: {
                read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
            },
            pageSize: 5
        };
        this.pageable = {
            refresh: true,
            pageSizes: true,
            buttonCount: 10
        };
    }
}

Content of \src\grid\app.html:

<template>
    <require from="./app.css"></require>

    Kendo Grid started!
    <br />

    <ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
        <ak-col k-title="Contact Name" k-field="ContactName">
            <ak-template>
                <div class='customer-photo' style="background-image: url('http://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg');"></div>
                <div class='customer-name'>${ContactName}</div>
            </ak-template>
        </ak-col>
        <ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
        <ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
        <ak-col k-field="Country"></ak-col>
    </ak-grid>

</template>

Is there some way to config the path to node_modules, ignoring or replacing the ASP.NET MVC routing?

Marton Sagi Marton Sagi · Accepted Answer · 2017-01-03T17:13:18

It looks like the main issue is that some of the kendoui-bridge components are missing from vendor-bundle.js. The incorrect relative urls are symptoms of that, because the RequireJS loader tries to find them after 'cache miss'.

To correct this issue, you can use the resources section to add additional resources of a library to the desired bundle file (e.g vendor-bundle.js).

Documentation / A Library with Additional Resources

Notice that we've added a resources array. Here we can provide a list of additional files to be included with the bundle. These files are relative to the path designated above and must include the file extension. You can also use glob patterns in place of exact file names.

Based on above, example aurelia.json / bundle config for KendoGrid inclusion:

{
    "name": "aurelia-kendoui-bridge",
    "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
    "main": "index",
    "resources": [
      "grid/*.*",
      "common/*.*"
    ]
}

I've created an MVC5 demo project to show it in action.

Note:

aurelia-kendoui-bridge has numerous resources, loading all of them can really slow down au build. You might want to create a watcher instead of regular au build to save up some time, similar to au run --watch but without the gulp serve part.

Usually, I have a simplified version of au run command, like this: au watch

URL to node_modules when using Aurelia KendoUI Bridge with ASP.NET MVC

2 Answers