Angular CLI

[Bob Bohi]

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]

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 [email protected] 

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