Ytukyg

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>

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.

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.