Angular CLI

Question

Hi, has anyone implemented the Angular 2 wrappers in an Angular CLI app? I've cloned the WebPack repo on GitHub and have working but would like to implement using Angular CLI. I attempted to do so using the ej-angular2 package but get the "...static function..." error after adding EJAngular2Module to the app.module.ts file. Thx.

Abinaya Subbiah · Answer

Hi Bob, 

Thanks for contacting Syncfusion support. 

We suspect that issue "...static function..."  due to that your sample configured with latest Angular 2 version packages or greater than the Angular 2 final version  2.0.0 . For now the Syncfusion JavaScript components supports Angular 2 final release version 2.0.0. We already consider this  “Upgrade Syncfusion Angular 2 components to Angular v2.4.0” as feature request , it will be included in our Essential studio 2017 Volume 1 release. 

So we suggest you to use angular-cli which uses configure with Angular 2 version 2.0.0. We can use angular-cli v1.0.0-beta.15 which supports Angular 2 Final version 2.0.0. Also angular-cli v1.0.0-beta.16 and v1.0.0-beta.17 having the “Cannot read property 'AssetUrl' of undefined”. Please find below issue link. 

https://github.com/angular/angular-cli/issues/2834 
Refer to the below steps to configure angular-cli with Angular 2 final version 2.0.0. 

Install angular-cli globally and create getting started sample with below commands.  
  




npm install -g angular-cli@v1.0.0-beta.15 
ng new [PROJECT_NAME]  
cd [PROJECT_NAME]  
ng serve  
  

To install Syncfusion JavaScript and Angular 2 components run below commands from sample’s root folder. 
  




npm install syncfusion-javascript --save  
npm install ej-angular2 --save  
npm install --save-dev @types/jquery  
npm install --save-dev @types/ej.web.all  


Configure the Syncfusion components from node_modules in angular-cli.json file script section. Refer to the below code snippet. 
  




{  
  "project": {  
    "version": "1.0.0-beta.16",  
    "name": "cli-sample"  
  },  
  "apps": [  
    {  
      "root": "src",  
      "outDir": "dist",  
      "assets": "assets",  
      "index": "index.html",  
      "main": "main.ts",  
      "test": "test.ts",  
      "tsconfig": "tsconfig.json",  
      "prefix": "app",  
      "mobile": false,  
      "styles": [  
        "styles.css"  
          
      ],  
      "scripts": [  
        "./../node_modules/jquery/dist/jquery.min.js",  
        "./../node_modules/jsrender/jsrender.min.js",  
        "./../node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"  
      ],  
      "environments": {  
        "source": "environments/environment.ts",  
        "dev": "environments/environment.ts",  
        "prod": "environments/environment.prod.ts"  
      }  
    }  
  ],  
  "addons": [],  
  "packages": [],  
  "e2e": {  
    "protractor": {  
      "config": "./protractor.conf.js"  
    }  
  },  
  "test": {  
    "karma": {  
      "config": "./karma.conf.js"  
    }  
  },  
  "defaults": {  
    "styleExt": "css",  
    "prefixInterfaces": false  
  }  
}  
  

Now, navigate to root of the application and run the application using ng serve command. 
  
We have prepared sample for your convenience. Refer to below link for the sample.  
  
Sample  
  
NOTE:  We have referred Syncfusion theme file from Syncfusion cdn link due to the reason “No Support for .cur cursor file loading”.  
  
We have implemented seed applications, to quick-start with Syncfusion JavaScript Angular 2 components. Refer to the below documentation link for getting started with seed application.    
    
https://help.syncfusion.com/angular-2/gettingstarted/   
   
We also implemented Angular 2 sample browser using our JavaScript Angular 2 components.   
   
http://ng2jq.syncfusion.com/  
    
Please revert us back if you need further assistance on this.    
    
Regards,    
Abinaya S