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 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.
Can you pass some more info related to bundler? And how the code which references the kendo module looks like?
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?
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.
using CLI? aurelia.json +
webpack.config, the view/model where tabstrip is used, and the main
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?
here is the link to code - it work fine locally but with prod-build it does not
Looks like I figured out the issue, I had to add the following in aurelia.json.
"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 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.
does anyone know about these issues?
Are you running a really old aurelia-cli? You should not need that for latest cli.
Thanks, When I update the latest cli, I start getting errors.
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.
Can I see your aurelia.json pls? It might need some change.
thisis complete project - https://drive.google.com/file/d/16p8qeDoIqDdtorNpuRJMb_PMMSmFZrJk/view?usp=sharing
Aurelia.json -
{
"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"
]
}
]
}
}
I am playing your app, I got it partial loaded with cleaned up dependencies in aurelia.json
"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"
}
]
plugin('aurelia-kendoui-bridge');). I need to debug that more. But the explicit dep config can bypass the issue.[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…
For the two issues in my previous post.
aurelia-testing which is behind if (env.testing). But unfortunately skipped your aurelia-kendoui-bridge too because it’s behind if (response).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.
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.src/shell/home.html like this, your app can start.<template></template>
To make your app work,
npm i popper.js for its js to work.import 'bootstrap'; at begining of src/main.ts (recommended).src/shell/home.html with content <template></template>.BTW, I don’t understand why you have
{
"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.
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?
"aurelia-bootstrapper",
"aurelia-loader-default",
"aurelia-pal-browser",
{
"name": "aurelia-testing",
"env": "dev"
},
"aurelia-kendoui-bridge", // explicitly load it
{
"name": "text",
"path": "../scripts/text"
}
]```Yes, remove all the rest.
I tried whatever you suggested so far and everything is working for me, appreciate all your help. Thanks