How do you get aurelia-cli using webpack with babel and electron to work with syncfusion?

[dan]

I have followed the instructions on https://help.syncfusion.com/aurelia/getting-started/skeleton-esnext-webpack using the latest syncfusion-bridge and syncfusion-javascript

It compiles successfully but I get error:Unable to find module with ID: aurelia-syncfusion-bridge when I try to view the page.

Thanks.

[dan]

In addition to using the aurelia-bridge I would also like to know how to get it to work using the javascript method and with electron.  Thanks.  I have researched this via syncfusion, aurelia, stackoverflow and I am still unable to get this working so I just wanted to let you know that I have tried solving this on my own.  I have aurelia and electron working fine I just don't know how to get syncfusion working with aurelia and electron.  I would actually prefer not using the aurelia-bridge method but know both methods would be nice.  Any help would be appreciated.

Thanks,

Dan

[Christopher Issac Sunder K]

Hi Dan, 

Thank you for contacting Syncfusion support. 

We have analyzed the reported issue and to resolve the issue Unable to find module with ID: aurelia-syncfusion-bridge, We need to use PLATFORM.Modulename to import aurelia-syncfusion-bridge in main.js file. Refer to the below code snippet. 

[main.js] 

. . . 

. . . 

export async function configure(aurelia: Aurelia) { 

  aurelia.use 

    .standardConfiguration() 

    .developmentLogging() 

    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.ejGrid()); 

 

  // Uncomment the line below to enable animation. 

  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css')); 

  // if the css animator is enabled, add swap-order="after" to all router-view elements 

 

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin. 

  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader')); 

 

  await aurelia.start(); 

  await aurelia.setRoot(PLATFORM.moduleName('app')); 

} 

 

 

[app.js] 

 

export class App { 

  router: Router; 

 

  configureRouter(config: RouterConfiguration, router: Router) { 

    config.title = 'Aurelia'; 

    config.map([ 

      { route: ['', 'welcome'], name: 'welcome',      moduleId: PLATFORM.moduleName('./welcome'),      nav: true, title: 'Welcome' }, 

      { route: 'users',         name: 'users',        moduleId: PLATFORM.moduleName('./users'),        nav: true, title: 'Github Users' }, 

      { route: 'child-router',  name: 'child-router', moduleId: PLATFORM.moduleName('./child-router'), nav: true, title: 'Child Router' }, 

        //Add the router configuration for Grid sample here 

      { route: 'grid',          name: 'grid',       moduleId: PLATFORM.moduleName('./samples/grid/grid'), nav: true, title: 'Grid' } 

    ]); 

 

    this.router = router; 

  } 

} 

 

 

 

We have upgraded this content in our UG documentation. Please refer to the below link. 

https://help.syncfusion.com/aurelia/getting-started/skeleton-esnext-latest 

For your convenience we have prepared a sample and attached below, 

Sample 

Electron Configuration 

 

We have configured our Syncfusion Components with Typescript skeleton and electron and rendered Grid and Button component. Please refer to the below sample link, 

Sample 

If you are still facing any configuration issues with Syncfusion Components, please share your sample application which reproduces the issue. 

It will help us to assist you soon to resolve the issue. 

Thanks,
Christo

[dan]

Thank you.  Could you provide the Electron Example in js instead of typescript.  Also can you provide an example without using the syncfusion-bridge.

Thanks again your support is excellent.

[Silambarasan I]

Hi Dan, 

 

Thanks for your feedback. 

 

We have prepared a sample with the electron configuration with basic aurelia esnext(js) skeleton. For your convenience, we have attached the sample below. Please refer it. 

Sample 

 

To know more about the electron configuration with basic aurelia skeleton, please refer to the below link. 

https://github.com/aurelia/skeleton-navigation/ 

 

And also, we have integrated our Syncfusion Grid component with esnext and electron. Refer to the below link for sample. 

Sample 

 

To configure our Syncfusion Components in esnext skeleton, refer our below UG help documentation. 

https://help.syncfusion.com/aurelia/getting-started/skeleton-esnext 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Silambarasan 

[dan]

I really appreciate your help and you are going above and beyond but my problem was with Webpack-Aurlia-Syncfusion-Electron using babel not typescript.  I understand that this is not your job to solve this problem particular problem but if you get a chance to provide a working example of the above scenario I would be grateful.  I have spent a lot of time trying to solve this.  I understand if you don't have the time and I really appreciate the examples that you have given.  I have made some progress because of them.

Thanks,

Dan

[Christopher Issac Sunder K]

Hi Dan, 

Thanks for the update.  

We have followed the basic Aurelia skeleton navigation repository to integrate our Syncfusion Components. Refer to the below link for skeleton repository. 

 

https://github.com/aurelia/skeleton-navigation 

 

We have configured the electron configuration in skeleton-esnext-webpack repository. Refer to the below link for sample. 

 

Sample 

 

In the same skeleton we have integrated our Syncfusion Grid component and configured with electron. We have ensured this at our end. For your convenience we have attached the sample below. 

 

Sample 

 

Steps to run the sample: 

 

Extract the sample 

 

npm install 

 

npm start // to run the sample 

 

npm run prod //To generate production build 

 

electron .    // To run the electron 

 

 

Please let us know if you need any further assistance. 

Thanks, 

Christo

[dan]

This is perfect.  Thank you very very much.  Have a great day!

[dan]

One problem if you delete the dist folder and then rebuild the syncfusion components do not work.

[Christopher Issac Sunder K]

Hi Dan, 

Thanks for the update. 

We have deleted the dist folder and generated the production build with the below command and Electron is working fine at our end. 

npm run prod 

Refer to the below screenshot. 

 

So please ensure the below details and share some more information about the issues which you are facing. 

• Please ensure the Syncfusion dependencies(syncfusion-javascript and aurelia-syncfusion-bridge) are installed properly.
• Ensure the sample is running or not in development mode with below command.

npm run start 

• Ensure the production build is generated correctly or let us know if you are facing any issues while generating production build.
• Share the Node and NPM version of your environment.

Thanks,
Christo

[dan]

I still cannot get your components to work. Here is my sample project.

1) yarn install

2) npm run prod

3) npm start

4) open new console and run electron .

Aurelia works but when I goto grid, I get an error about Jquery and no syncfusion controls are visible.

I also want to be able to use --watch instead of having to build prod after each file change.

i.e.... webpack --watch

Attachment: skeletonwithsyncfusionelectronwebpack_86aa844.zip

[dan]

It is working now.  Not sure what was wrong but I removed jquery then re-added it.  Thanks.

[Christopher Issac Sunder K]

Hi Dan, 

We are glad to hear that the issue has been resolved at your end. Please let us know if you need any further assistance. 

Thanks,
Christo