# Aurelia with Kendo bridge - page not loading after deployment

**URL:** <https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493>\
**Category:** Help Requests\
**Created:** [April 25, 2019, 11:19pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493 "2019-04-25T23:19:59Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 25, 2019, 11:20pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/1 "2019-04-25T23:20:00Z")

</div>

Hi, I am using Kendo bridge with Aurelia, Everything works on my machine but when its deployed to azure I get following error when I load the site:

[https://server/node\_modules/aurelia-kendoui-bridge/dist/amd/tabstrip/tabstrip.js](https://server/node_modules/aurelia-kendoui-bridge/dist/amd/tabstrip/tabstrip.js) net::ERR\_ABORTED 404 (Not Found)

ERROR [app-router] Error: Script error for “aurelia-kendoui-bridge/tabstrip/tabstrip”

not sure what I am missing,? Please let me know if you need more information to help me with the issues.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 26, 2019, 4:08am UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/2 "2019-04-26T04:08:44Z")

</div>

Can you pass some more info related to bundler? And how the code which references the kendo module looks like?

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [April 26, 2019, 12:08pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/3 "2019-04-26T12:08:11Z")

</div>

The easy thing is identifying the problem, it worked locally because you had node\_modules. The harder thing is finding out why it is looking there at all? Can you spin up a repo for us real quick?

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 26, 2019, 1:19pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/4 "2019-04-26T13:19:53Z")

</div>

yes, I understand it should not be looking at the node\_modules folder but I can’t figure out why. I am relatively new to aurelia and this is first time I am deploying.

this is how kendo is being referenced on the screen -

sorry, I probably wont be able to share repo, unless you want to me share specific files or code I can do that.

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [April 26, 2019, 2:05pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/5 "2019-04-26T14:05:40Z")

</div>

using CLI? aurelia.json +  
webpack.config, the view/model where tabstrip is used, and the main

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 26, 2019, 3:35pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/6 "2019-04-26T15:35:28Z")

</div>

Hi, I thought it would be easier for you to debug if I send you the complete project. I cleaned-up the project and left with only 1 screen where I use that kendo control. all the setup and other files are as is. How can I send the zip file?

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 29, 2019, 7:17pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/7 "2019-04-29T19:17:46Z")

</div>

here is the link to code - it work fine locally but with prod-build it does not

> **[Final.zip](https://drive.google.com/file/d/16p8qeDoIqDdtorNpuRJMb_PMMSmFZrJk/view)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 29, 2019, 9:01pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/8 "2019-04-29T21:01:31Z")

</div>

Looks like I figured out the issue, I had to add the following in aurelia.json.

```auto
"resources": [
              "grid/*.*",
              "common/*.*",
              "tabstrip/*.*",
              "dropdownlist/*.*"
            ]

```

but I still see other error messages like “text.js:308 GET [http://10.50.249.42:8080/scripts/app-bundle.html](http://10.50.249.42:8080/scripts/app-bundle.html) 404 (Not Found)” not sure if that has any impact, application still works, any idea how to resolve this? you can reproduce with the code I sent.

Another Issue — when I refresh the page it always throw me 404 error and this does not happen locally it only happens with the prod code, after doing some research I added web.config file(its commented right now) but that did not help either. you should be able to replicate the issue after adding the above 4 lines of code.

Any help regarding this will be really appreciated.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [April 30, 2019, 5:30pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/9 "2019-04-30T17:30:46Z")

</div>

does anyone know about these issues?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 1, 2019, 6:09am UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/10 "2019-05-01T06:09:38Z")

</div>

Are you running a really old aurelia-cli? You should not need that for latest cli.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [May 1, 2019, 12:51pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/11 "2019-05-01T12:51:35Z")

</div>

Thanks, When I update the latest cli, I start getting errors.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/d05fd3b9712861ced10735f97d8536ede03a57df.png)

Let me know if any one can help, it can be replicated in the code I sent earlier. you will have to update to latest cli.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 1, 2019, 9:37pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/12 "2019-05-01T21:37:41Z")

</div>

Can I see your aurelia.json pls? It might need some change.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [May 1, 2019, 10:51pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/13 "2019-05-01T22:51:06Z")

</div>

thisis complete project - [https://drive.google.com/file/d/16p8qeDoIqDdtorNpuRJMb\_PMMSmFZrJk/view?usp=sharing](https://drive.google.com/file/d/16p8qeDoIqDdtorNpuRJMb_PMMSmFZrJk/view?usp=sharing)

Aurelia.json -

```auto
{
  "name": "aureliaSP",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts"
  },
  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./typings/**/*.d.ts",
      "./custom_typings/**/*.d.ts",
      "./node_modules/@types/*/*.d.ts"
    ],
    "source": "src/**/*.ts"
  },
  "markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "less",
    "displayName": "Less",
    "fileExtension": ".less",
    "source": "src/styles/site/site.less"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test\\unit\\**\\*.ts"
  },
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources\\elements",
    "attributes": "resources\\attributes",
    "valueConverters": "resources\\value-converters",
    "bindingBehaviors": "resources\\binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "dropFolder": {
    "path": "drop_folder"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "scripts"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": false
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "scripts/adal.js",
          "scripts/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-fetch-client",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-http-client",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          {
            "name": "moment",
            "path": "../node_modules/moment",
            "main": "moment"
          },
          {
            "name": "moment-business-days",
            "path": "../node_modules/moment-business-days",
            "main": "moment-business-days"
          },
          {
            "name": "moment-timezone",
            "path": "../node_modules/moment-timezone",
            "main": "moment-timezone"
          },
          {
            "name": "daterangepicker",
            "path": "../node_modules/daterangepicker",
            "main": "daterangepicker"
          },
          {
            "name": "text",
            "path": "../scripts/text",
            "packageRoot": "../src/common/text.js"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "jquery",
          {
            "name": "kendo",
            "path": "../node_modules/@progress/kendo-ui/",
            "resources": [
              "js/kendo.button.js"
            ]
          },
          {
            "name": "aurelia-kendoui-bridge",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
            "main": "index",
            "resources": [
              "grid/*.*",
              "common/*.*",
              "tabstrip/*.*",
              "dropdownlist/*.*"
            ]
          },
          {
            "name": "numeral",
            "path": "../node_modules/numeral/min/numeral.min"
          },
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.min",
            "deps": [
              "jquery"
            ],
            "exports": "$"
          },
          "downloadjs"
        ]
      }
    ]
  }
}

```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 2, 2019, 6:25am UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/15 "2019-05-02T06:25:42Z")

</div>

I am playing your app, I got it partial loaded with cleaned up dependencies in aurelia.json

```auto
"dependencies": [
  "aurelia-bootstrapper",
  "aurelia-loader-default",
  "aurelia-pal-browser",
  {
    "name": "aurelia-testing",
    "env": "dev"
  },
  "aurelia-kendoui-bridge", // explicitly load it
  {
    "name": "text",
    "path": "../scripts/text"
  }
]

```

1. there is likely an aurelia-cli bug which didn’t auto trace aurelia-kendoui-bridge for your main.ts (`plugin('aurelia-kendoui-bridge');`). I need to debug that more. But the explicit dep config can bypass the issue.
2. your app has a strange error

```auto
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app-bundle.html, line 0)

```

I don’t know why it tried to load `app-bundle.html`.

I will continue tomorrow. Out of office now…

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 2, 2019, 11:09pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/16 "2019-05-02T23:09:29Z")

</div>

For the two issues in my previous post.

1. You have a condition wrapped plugin loading. The tracer has an optimisation to skip conditional dependency, this is designed to skip `aurelia-testing` which is behind `if (env.testing)`. But unfortunately skipped your `aurelia-kendoui-bridge` too because it’s behind `if (response)`.

```auto
if (response) {
  //...
  .plugin('aurelia-kendoui-bridge');;
  // ...
  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }
  // ...
}

```

I am pretty sure you don’t need to check `if (response)` because failure will goto `.catch(` branch instead of this `.then(` branch. Anyway, you can do explicit “aurelia-kendoui-bridge” in aurelia.json dependencies to keep your existing code.

1. The `app-bundle.html` issue is cause by missing `src/shell/home.html`. I understand your `src/shell/home.ts` does nothing but you still need a view to satisfy aurelia convention.  
Once you add `src/shell/home.html` like this, your app can start.

```auto
<template></template>

```

To make your app work,

1. use the dependencies list I provided in previous post.
2. note you use bootstrap v4 which can be autotraced. But you need `npm i popper.js` for its js to work.

- either add “bootstrap” (just this string) to the dependencies list.
- or add `import 'bootstrap';` at begining of `src/main.ts` (recommended).

1. add `src/shell/home.html` with content `<template></template>`.

BTW, I don’t understand why you have

```auto
{
    "name": "kendo",
    "path": "../node_modules/@progress/kendo-ui/"
  },

```

You already got kendo loaded in the index.html script tags, don’t need anything (again) in the bundle. That is the same reason that you can remove bluebird from your prepend list.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [May 2, 2019, 11:36pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/17 "2019-05-02T23:36:18Z")

</div>

Thanks for spending time to help me out with this… I will try all these tomorrow and let you know how it goes, Appreciate all your help.

just one clarification, are you suggesting I only use this in dependency section and remove everything else?

````auto
  "aurelia-bootstrapper",
  "aurelia-loader-default",
  "aurelia-pal-browser",
  {
    "name": "aurelia-testing",
    "env": "dev"
  },
  "aurelia-kendoui-bridge", // explicitly load it
  {
    "name": "text",
    "path": "../scripts/text"
  }
]```
````

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [May 3, 2019, 4:06am UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/18 "2019-05-03T04:06:55Z")

</div>

Yes, remove all the rest.

---

<div class="post-metadata">

**Author:** ![amitgupta4](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@amitgupta4](https://discourse.aurelia.io/u/amitgupta4)\
**Post date:** [May 3, 2019, 3:14pm UTC](https://discourse.aurelia.io/t/aurelia-with-kendo-bridge-page-not-loading-after-deployment/2493/19 "2019-05-03T15:14:46Z")

</div>

I tried whatever you suggested so far and everything is working for me, appreciate all your help. Thanks