Instructons for Using Essential JS 2 for Angular in Visual Studio 2017 with Webkit

Question

I would like to try the controls for Essential JS 2 for Angular with Visual Studio 2017 (15.4.6). The documentation details using SystemJS; however, the default Angular project in Visual Studio 2017 uses Webpack. Do you have any instructions on how to use the controls (the Grid wold be my first control to use) with Webpack?

By the way, I have been using the Syncfusion controls for ASP.NET MVC for several years and really like them. However, this is my first time to try them with Angular (and I am just beginning to get up to speed with Angular/Webpack).

Regards, Jeff

Isuriya Rajan · Answer

Hi Jeffrey, 
 
Thanks for contacting Syncfusion support, 
As per your requirement we have created the sample with Webpack . It will resolve the modules implicitly. While using the Webpack no need for any special configuration to load Syncfusion ej2-ng-grids package . it will resolved by webpack implicitly  
 
In this sample we have included the webpack in package.json like in below code example 
 




"scripts": { 
        "test": "karma start ClientApp/test/karma.conf.js", 
        "webpack": "node ./node_modules/webpack/bin/webpack.js" 
    }, 
 
 
Please refer the below sample for your reference: 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder-580757998.zip 
 
For running this sample  refer the below commands. 
 
      1.npm install 
      2. npm run webpack && dotnet run 
 
Regards, 
Isuriya R

Ali Kholmatov · Answer

Hi Jeffrey, 
 
Thanks for contacting Syncfusion support, 
As per your requirement we have created the sample with Webpack . It will resolve the modules implicitly. While using the Webpack no need for any special configuration to load Syncfusion ej2-ng-grids package . it will resolved by webpack implicitly  
 
In this sample we have included the webpack in package.json like in below code example 
 




"scripts": { 
        "test": "karma start ClientApp/test/karma.conf.js", 
        "webpack": "node ./node_modules/webpack/bin/webpack.js" 
    }, 
 
 
Please refer the below sample for your reference: 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder-580757998.zip 
 
For running this sample  refer the below commands. 
 
      1.npm install 
      2. npm run webpack && dotnet run 
 
Regards, 
Isuriya R Hi! What about  grid style ( where Can I add them ) Thank you !

Mohammed Farook J · Answer

Hi Jeffrey, 
 
You can get the Grid styles from the following location. 
 





Sample-location
ode_modules\@syncfusion\ej2-grids\styles\material.css 
 
Example : 

D:\Angular -2017 sample
ode_modules\@syncfusion\ej2-grids\styles\material.css 



To include the Grid style reference in your _Layout.cshtml 






<link rel="stylesheet" href="~/material.css" /> @*we added the style in wwwroot folder and we refer from that location*@ 


We have copied and pasted grid material.css in the wwwroot folder and included the style reference in _Layout.cshtml (provided the sample from last response). 

Regards, 
J.Mohammed Farook