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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Webpack with Angurlar 2 + Syncfusion

Thread ID:

Created:

Updated:

Platform:

Replies:

127537 Nov 21,2016 07:42 AM UTC Dec 27,2016 09:16 AM UTC JavaScript 11
loading
Tags: General
j.nord
Asked On November 21, 2016 07:42 AM UTC

How can we use Syncfusion with Angular 2 and Webpack?

How can we bind Syncfusion in the ventor file??

Abinaya Subbiah [Syncfusion]
Replied On November 22, 2016 05:29 AM UTC

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. 
 
 
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. 
 
 
Please get back to us, if you need further assistance on this. 
 
Regards, 
Abinaya S 


j.nord
Replied On November 23, 2016 03:50 PM UTC

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 [Syncfusion]
Replied On November 24, 2016 05:22 AM UTC

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   


j.nord
Replied On November 25, 2016 04:50 PM UTC

Thank you for the answer. So it runs.

Abinaya Subbiah [Syncfusion]
Replied On November 28, 2016 04:28 AM UTC

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
Replied On November 28, 2016 05:08 AM UTC

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 [Syncfusion]
Replied On November 28, 2016 11:14 AM UTC

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.   
 
 
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 


j.nord
Replied On November 28, 2016 03:56 PM UTC

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 [Syncfusion]
Replied On November 29, 2016 06:43 AM UTC

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. 


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

Regards, 
Abinaya S 


Samar Hassan
Replied On December 26, 2016 11:32 PM UTC

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 [Syncfusion]
Replied On December 27, 2016 09:16 AM UTC

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.  


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

Regards,  
Abinaya S  


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.

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

;