0

How do I configure Syncfusion JavaScript for use with Aurelia via Aurelia CLI?

Here is how Syncfusion JavaScript configured when used with jspm (via http://aurelia-ui-toolkits.github.io/demo-syncfusion/#/installation):

Open config.js and add a couple of path mappings:

paths: {
  "*": "src/*",
  "github:*": "jspm_packages/github/*",
  "npm:*": "jspm_packages/npm/*",
  "common/ej.*": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.1.0.41/scripts/ej/common/ej.*.js",                           <----
  "datavisualization/ej.*": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.1.0.41/scripts/ej/datavisualization/ej.*.js",     <----
  "ej.*": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.1.0.41/scripts/ej/web/ej.*.js",                                     <----
  "syncfusion-javascript/*": "jspm_packages/github/syncfusion/JavaScript-Widgets@14.1.0.41/*"                                     <----      
},
"map": {
  "aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1",
  "aurelia-fetch-client": "npm:aurelia-fetch-client@1.0.0-beta.1",
  "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.2",
  "jquery": "npm:jquery@2.2.3",                                                     <----
  "jquery.min": "npm:jquery@2.2.3",                                                 <----
  "jquery-easing": "npm:jquery.easing@1.3.2",                                       <----
  "jquery-validation": "npm:jquery-validation@1.15.0",                              <----
  "jquery-validation-unobtrusive": "npm:jquery-validation-unobtrusive@3.2.6",       <----
  "jsrender": "npm:jsrender@0.9.75",                                                <----
}
Alexei Vinidiktov
  • 169
  • 3
  • 8

1 Answers1

0

Check out the Aurelia CLI documentation on how to add libraries to your project.

Your basic steps will probably be to install the package via npm:
npm install syncfusion-javascript --save
That will add the package to your project.json file and have it downloaded.

Next you're going to want to configure your aurelia.json file. Because SyncFusion is not modular, and is really just a library of files, there is no way to just reference a package and have it bundled. What you'll have to do is create a package for each of the packages you're using.
Or, alternate solution, create your own javascript "main" file that references all the modules in the package you want, and set that as the "main" in the package description 

{
   "name": "syncfusion-javascript",
   "path": "../node_modules/syncfusion-javascript",
   "main": "syncFusionCustomMain"
}

Your syncFusionCustomMain.js file would import the files from the node_modules folder, and then export the functions to be referenced appropriately.

Sorry this is kind of bad news for you. This package is just not loader friendly, and as of right now, the CLI doesn't have support for just defining paths (since everything gets bundled, it needs to have everything be explicit at compile time).

Andrew
  • 718
  • 1
  • 7
  • 25
  • Refer this link https://github.com/aurelia-ui-toolkits/aurelia-syncfusion-bridge/issues/43 for Aurelia-CLI support for "aurelia-syncfusion-bridge". For further assistance you can contact support@syncfusion.com – Karthick Sep 15 '16 at 10:24