Syncfusion, angular 4 and angular cli

[Matthew Meehan]

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

[Matthew Meehan]

it looks like the formatting broke on submit

[Matthew Meehan]

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" />

[Abinaya Subbiah]

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.  

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents  

Regards,  

Abinaya 

[Vaughn]

Did you find a solution to this ?

[Matthew Meehan]

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.

[Abinaya Subbiah]

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  

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli  

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

Regards, 

Abinaya

[Abinaya Subbiah]

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. 

Sample 

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

Regards, 

Abinaya S