How do you get syncfusion to work in an aurelia electron app using webpack?

Question

I have Aurelia, Electron, and Webpack working but I would like to include the CDN version of Syncfusion. In a normal web app you can just include it in the HTML file but how do you include it in an Aurelia Electron Webpack app?

In my app.html I have the below code:

<require from="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></require>
<require from="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></require>
<require from="http://cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"></require>

score 11 · Accepted Answer · edited Nov 20 '18 at 15:18

For your information, Webpack application will bundle the script files in the dist folder which is helpful to run the Electron application.

To import the Syncfusion JavaScript dependencies files, you can use either of these two ways:

Import the script in main.ts file
Create a custom JavaScript file for Syncfusion Dependencies

Import the script in main.ts file

Import the script in main.ts file as like below code snippet. While importing the Syncfusion JavaScript dependencies as below, it will be bundled in the dist folder.

...
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';
import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.ejGrid());
...

Create a custom JavaScript file for Syncfusion Dependencies

You have to create a custom JavaScript file for Syncfusion Dependencies (ej.web.all.min.js) and import the created JavaScript files using require in your app.html file.

score 0 · Answer 2 · answered Nov 20 '18 at 03:21

0

The require tag is not for external CDNs, but is for local custom elements/value converters/custom attributes/styles. Add the <script src="http://..."> element to your index.html or create a custom element to load the script in a specific component like this.

answered Nov 20 '18 at 03:21

jbockle

633
5
11

I can't include it in the index.html as this is an electron app. I read about the custom component but I hope there is a better way. If there are no more answers I will mark this as correct – dan Nov 20 '18 at 03:57

How do you get syncfusion to work in an aurelia electron app using webpack?

2 Answers2

Import the script in main.ts file

Create a custom JavaScript file for Syncfusion Dependencies