We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141059 Nov 20,2018 05:28 AM UTC Nov 28,2018 08:55 AM UTC Aurelia 12
loading
Tags: General
dan
Asked On November 20, 2018 05:28 AM UTC

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
Replied On November 20, 2018 04:24 PM UTC

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 [Syncfusion]
Replied On November 21, 2018 12:26 PM UTC

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. 


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


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, 


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
Replied On November 22, 2018 02:56 AM UTC

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 [Syncfusion]
Replied On November 22, 2018 07:12 AM UTC

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. 
 
To know more about the electron configuration with basic aurelia skeleton, please refer to the below link. 
 
And also, we have integrated our Syncfusion Grid component with esnext and electron. Refer to the below link for sample. 
 
To configure our Syncfusion Components in esnext skeleton, refer our below UG help documentation. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Silambarasan 


dan
Replied On November 22, 2018 05:24 PM UTC

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 [Syncfusion]
Replied On November 23, 2018 12:26 PM UTC

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. 
 
 
We have configured the electron configuration in skeleton-esnext-webpack repository. Refer to the below link for 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. 
 
 
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
Replied On November 23, 2018 04:09 PM UTC

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

dan
Replied On November 23, 2018 08:36 PM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On November 26, 2018 06:06 AM UTC

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
Replied On November 28, 2018 06:01 AM UTC

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
Replied On November 28, 2018 06:55 AM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On November 28, 2018 08:55 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon