Webpack with Angurlar 2 + Syncfusion

[jnord]

How can we use Syncfusion with Angular 2 and Webpack?

How can we bind Syncfusion in the ventor file??

[Abinaya Subbiah]

Hi Jurgen, 

 

Thanks for contacting Syncfusion support. 

 

We have implemented Syncfusion Angular 2 seed application in our GitHub repository, to avoid configuration issues while developing applications using our JavaScript Angular 2 components. Refer to the below getting started help documentation link to use and import our Syncfusion Angular 2 components into Angular 2 application. 

 

Getting started 

 

You can find our Angular 2 components from the below Essential Studio build installed location. 

 

(Installed Location)\Syncfusion\Essential Studio\14.3.0.49\JavaScript\assets-src\angular2\ 

 

 

We have also implemented Angular 2 sample browser using our JavaScript Angular 2 components. 

 

https://ng2jq.syncfusion.com/ 

 

Please get back to us, if you need further assistance on this. 

 

Regards, 

Abinaya S 

[jnord]

With Webpack it doesn't work. We get follow error from webpack:

(203,13): error TS2304: Cannot find name 'ej'.ERROR in ./app/ej/core.ts

(243,14): error TS2304: Cannot find name '$'.ERROR in ./app/ej/core.ts

l

[Abinaya Subbiah]

Hi Jurgen,  

  

We suspect that the issue occurred due to typings not installed properly in the sample. In some system environment typings will not be installed properly, since ensure typings are installed properly in the application as like the below screenshot. 

  

    

 

·         To install the typings run the below command and ensure the installed packages are same like the above screenshot.  

  

npm run typings install  

  

·         If you are still facing the issues with typings, we recommend you to install typings package globally using the below command.   

   

npm install -g typings or    

npm install typings -g   

   

·         Then run typings install command at the root of Angular 2 sample application, in which the typings.json must be available.   

   

·         Now the typings will be installed properly.   

 

Please let us know if you need further assistance.   

 

Regards,   

Abinaya S   

[jnord]

Thank you for the answer. So it runs.

[Abinaya Subbiah]

Hi Jurgen,  

Thanks for your update.  

We are happy to hear that your requirement achieved. Please get back us If you need further assistance on this.  

Regards,  

Abinaya S  

[Yamaguchi]

I have a problem on the latest version (14.4.0.15).
'core.ts' cannot be compiled with the following errors. 

ERROR in [default] /ej/core.ts:508:3
Property 'template' does not exist on type 'typeof ej'.

ERROR in [default] /ej/core.ts:532:3
Property 'template' does not exist on type 'typeof ej'.

ERROR in [default] /ej/core.ts:532:24
Property 'template' does not exist on type 'typeof ej'.

[Abinaya Subbiah]

Hi Yamaguchi,  

 

We suspect that, you are using the typings file ej.web.all.d.ts from older version. Since, we have provided template rendering support from this release(v14.4.0.15) onwards. We have published our updated typings file (v14.4.0.15) in DefinitelyTyped repository types-2.0 branch. Now you can use typings file from npm, add required typings files in devDependencies of “package.json” file. Please refer to the below code for adding “ej.web.all” typings in package.json file 

 

{  

  . . . . .  

  "devDependencies": {  

    . . .   

    "@types/ej.web.all": "^14.3.2",  

    "@types/jquery": "^2.0.34",  

    "@types/es6-shim": "^0.31.32"  

  }  

}  

 

 

We have also submitted the same changes of Typescript definition files (v14.4.0.15) into DefinitelyTyped master repository, which is awaiting to merge. You can track the progress from the below GitHub thread link.   

 

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12947 

 

We will intimate you once the definition file updated in this repository. Then, we can use ej.web.all.d.ts file from typings.json file configuration. 

 

Please revert us back if need further assistance on this. 

 

Regards, 

Abinaya S 

[jnord]

We have integrated the types:

"@types/ej.web.all": "^14.3.2",

For this, however, the following step is alos necessary:

tsconfig.json:

"types": [ "node", "ej.web.all", "jquery" ]

But then we get follow error:

    508,4): error TS2339: Property 'template' does not exist on type 'typeof ej'. 

Where is the error ??

Version 14.4.0.15 

 

[Abinaya Subbiah]

Hi Jurgen, 

Sorry for the inconvenience caused.  

The types-2.0 branch definition files are automatically published in NPM repository, since the version is not as same as Essential Studio release version. We are investigating further on this to resolve the version issues. As for now, we suggest you to use @types/ej.web.all@^0.0.1 which is published recently as NPM package, in which the compilation failure “error TS2339: Property 'template' does not exist on type 'typeof ej'.” will be fixed. So please change ej.web.all file version to “0.0.1”. Please refer to the below code snippet. 

{   

  . . . . .   

  "devDependencies": {   

    . . .    

    "@types/ej.web.all": "^0.0.1",   

    "@types/jquery": "^2.0.34",   

    "@types/es6-shim": "^0.31.32"   

  }   

}   

We have prepared a simple sample for your convenience and attached below. 

sample 

Please revert us back, If you need further assistance on this. 

Regards, 

Abinaya S 

[Samar Hassan]

I also have this error
ERROR in [default] D:\Source\PACS\MedStreaming.Analytics\ProtoTypes\GridAngular2
Syncfusion\angular2-seeds-master\src\app\ej\angular2\core.ts:508:3
Property 'template' does not exist on type 'typeof ej'.

ERROR in [default] D:\Source\PACS\MedStreaming.Analytics\ProtoTypes\GridAngular2
Syncfusion\angular2-seeds-master\src\app\ej\angular2\core.ts:532:3
Property 'template' does not exist on type 'typeof ej'.

ERROR in [default] D:\Source\PACS\MedStreaming.Analytics\ProtoTypes\GridAngular2
Syncfusion\angular2-seeds-master\src\app\ej\angular2\core.ts:532:24
Property 'template' does not exist on type 'typeof ej'.

I have tried the solution of adding  “ej.web.all” typings in package.json file,  But the error still appear when run this command >> npm start.

please advise?

[Abinaya Subbiah]

Hi Samar, 

As we stated in our previous updates we have fixed the compilation issue “error TS2339: Property 'template' does not exist on type 'typeof ej'.”  in  ej.web.all file version “0.0.1”. Please try with below one of the solution to resolve the issue. 

1.       Remove typings/globals/ej.web.all  folder from the application and do the below changes.  

a.       Run below commands to install typings globally. 

npm install -g typings  

(or) 

npm install typings -g   

b.       Then run typings install command at the root of Angular 2 sample application, in which the typings.json must be available and ensure the ej.web.all typings is installed as like the below screenshot. 

    

 

                                 

c.       The issue “Property 'template' does not exist on type 'typeof ej'.” due to template property not present in “ej.web.all” file, so ensure the “template” property is available in installed typings as like below screenshot. 

 

2.       If you defining types in pacake.json file, remove node_module/@types, typings folder and “typings.json” file from the sample. Then add typings from types-2.0  in package.json file and run npm install command to reinstall the packages. Please refer to below code snippet for @types in package.json  file. We can also ensure the “template” property from the file node_modules/@types/ej.web.all/index.d.ts as like in the above method. 

{ 

                . . . . . . 

   

  "devDependencies": { 

     . . . .  

     . . . ., 

    "@types/node": "^6.0.45", 

    "@types/ej.web.all": "^0.0.1", 

    "@types/jquery": "^2.0.34", 

    "@types/es6-shim": "^0.31.32" 

  } 

} 

 

We have prepared a simple sample for your convenience and attached below.  

Sample 

If you are still facing issue, please share the sample or modified the given sample as issue reproducible. 

Regards,  

Abinaya S