Not working with aurelia-cli using current installation instructions

johot commented 7 years ago

So I am trying to get the kendo bridge working in a new aurelia-cli project. When trying to add the datepicker I get the error message The kendo control 'kendoDatePicker' is not available. Did you load Kendo (in addition to the bridge)?

This is the steps I took:

Created a new project using au new kendo.
Imported kendo bridge npm install aurelia-kendoui-bridge --save

Used the following aurelia.json

{
"name": "kendo",
"type": "project:application",
"platform": {
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "index.html",
"baseDir": "."
},
"transpiler": {
"id": "babel",
"displayName": "Babel",
"fileExtension": ".js",
"options": {
  "plugins": [
    "transform-es2015-modules-amd"
  ]
},
"source": "src/**/*.js"
},
"markupProcessor": {
"id": "minimum",
"displayName": "Minimal Minification",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css",
"source": "src/**/*.css"
},
"editor": {
"id": "vscode",
"displayName": "Visual Studio Code"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test/unit/**/*.js"
},
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"attributes": "resources/attributes",
"valueConverters": "resources/value-converters",
"bindingBehaviors": "resources/binding-behaviors"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
},
"build": {
"targets": [
  {
    "id": "web",
    "displayName": "Web",
    "output": "scripts",
    "index": "index.html",
    "baseDir": "."
  }
],
"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",
      "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
      "node_modules/requirejs/require.js"
    ],
    "dependencies": [
      "aurelia-binding",
      "aurelia-bootstrapper",
      "aurelia-dependency-injection",
      "aurelia-event-aggregator",
      "aurelia-framework",
      "aurelia-history",
      "aurelia-history-browser",
      "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",
      "text",
      {
        "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"
      },
      {
        "name": "aurelia-kendoui-bridge",
        "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
        "main": "index",
        "resources": [
          "common/*.{js,html}",
          "button/*.{js,html}"
        ]
      }
    ]
  }
]
}
}

Used the following main.js

import environment from './environment';

export function configure(aurelia) {
   aurelia.use
     .standardConfiguration()
     .developmentLogging()
     .plugin('aurelia-kendoui-bridge');

   aurelia.start().then(a => a.setRoot());
 }

Added the following to app.html:

<template>
  <require from="aurelia-kendoui-bridge/datepicker/datepicker"></require>

  <div id="example">
    <div class="demo-section k-content">
      <h4>Show e-mails from:</h4>
      <input id="datepicker" ak-datepicker="k-value.bind:'10/10/2011'" style="width: 100%" />

      <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
      <input id="monthpicker" ak-datepicker="k-value.bind:'November 2011'; k-start.bind:'year'; k-depth.bind: 'year';k-format.bind:'MMMM yyyy';" style="width: 100%" />
      </p>
    </div>
  </div>
</template>

Now I get the error message:

vendor-bundle.js:1395 Unhandled rejection Error: Error invoking DatePicker. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: The kendo control 'kendoDatePicker' is not available. Did you load Kendo (in addition to the bridge)?
Inner Error Stack:
Error: The kendo control 'kendoDatePicker' is not available. Did you load Kendo (in addition to the bridge)?
    at WidgetBase.control (http://localhost:9000/scripts/vendor-bundle.js:29121:15)
...

Am I missing something or are the instructions out of date?

JeroenVinke commented 7 years ago

There were some changes in the way that kendo is distributed. I will look into it, but for now I'd recommend loading Kendo through script tags in index.html

JeroenVinke commented 7 years ago

I have removed the instructions from the documentation for now

johot commented 7 years ago

Thanks Jeroen!

What I had to do was use the regular aurelia-cli instructions, and then use the script tags. That made it all work. I hope you can get some new instructions working soon :) Thanks again!

2017-05-09 15:26 GMT+02:00 Jeroen Vinke notifications@github.com:

I have removed the instructions from the documentation for now

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues/742#issuecomment-300162803, or mute the thread https://github.com/notifications/unsubscribe-auth/AQ4MgFc_UQa4JD_yuWtkvtjsGBwAdyYZks5r4GmIgaJpZM4NVTdj .

arnevdv commented 7 years ago

Is there any progress on this issue?

johot commented 7 years ago

You can get it working by following the old cli instructions + manual script tag. But I hope we can get an official new documentation!

2017-05-16 8:38 GMT+02:00 arnevdv notifications@github.com:

Is there any progress on this issue?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues/742#issuecomment-301689448, or mute the thread https://github.com/notifications/unsubscribe-auth/AQ4MgAj3c0s4FYKvaBxul3po6zRUu6Tjks5r6UROgaJpZM4NVTdj .

arnevdv commented 7 years ago

using the manual script tag is not an option in my application...

JeroenVinke commented 7 years ago

Apologies for the wait. Hopefully my workload goes down at the end of this week so I can take a stab at writing new instructions

arnevdv commented 7 years ago

Thanks for the update :) 👍 I can not use the script tags because my application has to load as less things ass possible from external libs to make my data exchange as low as possible

JeroenVinke commented 7 years ago

I must be crazy, because the old instructions seem to suddenly work now. I have pushed the test app here: https://github.com/JeroenVinke/aurelia-cli-kendoui

JeroenVinke commented 7 years ago

Here are the updated instructions: https://aurelia-ui-toolkits.gitbooks.io/kendo-ui-sdk-installation/content/installation/installing%20kendo/advanced/pro/requirejs.html

aurelia-ui-toolkits / aurelia-kendoui-bridge

Not working with aurelia-cli using current installation instructions #742

This is the steps I took: