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. Image for the cookie policy date

Syncfusion, angular 4 and angular cli

Hey there guys.I have pieced together from many sources how to get sync fusion to work properly on an angular-cli project.right now I am having the following error in the browser when using      ng serve --aot falseERROR TypeError: $(...)[("ej" + this.controlName)] is not a function...ERROR TypeError: this.widget is undefinedI have attached the stack trace from console.To create this project I have done the following:use the instructions here:      https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli#163337I used nebojsa's work around here:      https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli#166588and I was also having an issue with webpack not finding @types/ej.web.all so I added this to the top of app.component.ts:     /// < reference path="../../node_modules/@types/ej.web.all/index.d.ts" />Attachment: syncfusion_error_angularcli_project_98af785b.zip

7 Replies

MM Matthew Meehan May 6, 2017 12:50 AM UTC

it looks like the formatting broke on submit


MM Matthew Meehan May 6, 2017 01:14 AM UTC

Hey there guys.
I have pieced together from many sources how to get sync fusion to work properly on an angular-cli project.
right now I am having the following error when using
     ng serve --aot false

ERROR TypeError: $(...)[("ej" + this.controlName)] is not a function
...
ERROR TypeError: this.widget is undefined

I have attached the stack trace from the browser console.

To create this project I have done the following:
use the instructions here:
     https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli#163337
I used nebojsa's work around here:
     https://www.syncfusion.com/forums/127630/how-to-work-with-angular-cli#166588
and I was also having an issue with webpack not finding @types/ej.web.all so I added this to the top of app.component.ts:
     /// <reference path="../../node_modules/@
types/ej.web.all/index.d.ts" />


AS Abinaya Subbiah Syncfusion Team May 8, 2017 10:20 AM UTC

Hi Matthew Meehan, 

A support incident has been created under your account and we have answered your queries in that. Please log on to our support website to check for further updates.  


Regards,  
Abinaya 



VA Vaughn July 6, 2017 04:01 PM UTC

Did you find a solution to this ?




MM Matthew Meehan July 6, 2017 10:02 PM UTC

Syncfusion team seems to think it works fine, and the example they give shows a new solution made from the cli and then installing the library with npm, which does work, but as soon as I added a diagram component to the page it errored out. It may be fixed by now but given you are looking for a solution it seems like it might not have.



AS Abinaya Subbiah Syncfusion Team July 7, 2017 09:13 AM UTC

Hi Vaughn,  

To use Syncfusion Angular Components, we need dependencies Syncfusion-JavaScript, Jquery and Jsrender. So we suspect that the issue ERROR TypeError: $(...)[("ej" + this.controlName)] is not a function, due to Syncfusion-Javascript dependencies are not registered while importing ej-angular2 package.  

The recent version of Syncfusion Angular components supports module loading. So no need to refer Syncfusion JavaScript widget files separately. The Syncfusion JavaScript dependencies will be loaded while importing EJAngular2Module from ej-angular2 package.  Also refer jquery and jsrender dependencies in polyfills.ts file. Refer to the below code snippet.  

[polyfills.ts]  
. . .  
. . .  
import 'zone.js/dist/zone'// Included with Angular CLI.  
  
import * as jquery from 'jquery';  
window['jQuery'] = jquery;  
window['$'] = jquery;  
. . .  

For your convenience we have prepared angular-cli sample to render ejGridComponent. Refer to the below link for sample.    
    
Sample  

Refer to the below documentation link for getting started with AngularCLI application with Syncfusion Angular Components  


Please let us know If you need further assistance on this.  

Regards, 
Abinaya


AS Abinaya Subbiah Syncfusion Team July 7, 2017 09:15 AM UTC

Hi Matthew, 

We are unable to reproduce the reported issue “Unable to render diagram component” at our end. For your convenience we have created Angular CLI sample with ejDiagram component. Please find the sample in below link. 


If you are still facing issues share more information of issue or share the attached sample as issue reproducible. 

Regards, 
Abinaya S 


Loader.
Up arrow icon