Question: aurelia-syncfusion-bridge aspnet AureliaSpa template integration

[atoninelli]

I say I'm totally new to Aurelia and in general to Webpack / npm, this said, I'm trying to integrate the syncfusion UI in the aspnet/JavaScriptServices/templates/AureliaSpa/ template, using aurelia-syncfusion-bridge. Till now without success.

Did the following steps:

• dotnet new aurelia [generated a working core dotnet, aurelia project from the template]

• install/update existing npm packages

• installed from npm: 'syncfusion-javascript' and 'aurelia-syncfusion-bridge' as you can see from the attached file package.json also added (in package.json) a 'resource' such as: "aurelia": { "build": { "includeDependencies": "aurelia-*", "resources": [ "aurelia-syncfusion-bridge/button/button" ] } }

• in webpack.config.js added cur|gif support in module / loaders (webpack.config.js attached)

• in boot.ts added: aurelia.use.plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejButton()) , boot.ts is attached

• in app.html added syncfusion-javascript css <require> tag (app.html is attached)

• in home.html trying to integrate <button ej-button="e-text:submit" e-on-click.delegate="click()"></button> but ej- attributes are not recognized (no text displayed and no event fired).

Am I missing something? app.html.txt boot.ts.txt package.json.txt webpack.config.js.txt

Thanks for your answers.

[karthickthangasamy]

@atoninelli We suspect that jquery is not exposed properly in window object. Refer to the below snippet.

[boot.ts]

/** Export jQuery to window object **/
import * as $ from 'jquery';
window['jQuery'] = $;
window['$'] = $; 

We created page to integrate aurelia-syncfusion-bridge into SPA templates here

[atoninelli]

Thank you @karthickthangasamy ! Now it's ok. Bye.