How to work with Angular CLI

[Thuc]

Hi,

Has anyone been successful using the component with Angular CLI project? 

I have tried many ways to use the Grid component with Angular CLI project but failed with following error. I am wondering if there is any guideline for this?

Error: Uncaught (in promise): TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

   at Function code (Function code:188:1)

   at evalExpression (http://localhost:4200/main.bundle.js:47538:5)

   at jitStatements (http://localhost:4200/main.bundle.js:47544:5)

   at RuntimeCompiler.prototype._compileDirectiveWrapper (http://localhost:4200/main.bundle.js:32803:13)

   at Anonymous function (http://localhost:4200/main.bundle.js:32713:17)

   at Anonymous function (http://localhost:4200/main.bundle.js:32710:13)

   at RuntimeCompiler.prototype._compileComponents (http://localhost:4200/main.bundle.js:32708:9)

   at createResult (http://localhost:4200/main.bundle.js:32636:13)

   at ZoneDelegate.prototype.invoke (http://localhost:4200/main.bundle.js:63358:13)

   at Zone.prototype.run (http://localhost:4200/main.bundle.js:63242:17)

   {

      [functions]: ,

      __proto__: { },

      description: "Uncaught (in promise): TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

   at Function code (Function code:188:1)

   at evalExpression (http://localhost:4200/main.bundle.js:47538:5)

   at jitStatements (http://localhost:4200/main.bundle.js:47544:5)

   at RuntimeCompiler.prototype._compileDirectiveWrapper (http://localhost:4200/main.bundle.js:32803:13)

   at Anonymous function (http://localhost:4200/main.bundle.js:32713:17)

   at Anonymous function (http://localhost:4200/main.bundle.js:32710:13)

   at RuntimeCompiler.prototype._compileComponents (http://localhost:4200/main.bundle.js:32708:9)

   at createResult (http://localhost:4200/main.bundle.js:32636:13)

   at ZoneDelegate.prototype.invoke (http://localhost:4200/main.bundle.js:63358:13)

   at Zone.prototype.run (http://localhost:4200/main.bundle.js:63242:17)",

      message: "Uncaught (in promise): TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

   at Function code (Function code:188:1)

   at evalExpression (http://localhost:4200/main.bundle.js:47538:5)

   at jitStatements (http://localhost:4200/main.bundle.js:47544:5)

   at RuntimeCompiler.prototype._compileDirectiveWrapper (http://localhost:4200/main.bundle.js:32803:13)

   at Anonymous function (http://localhost:4200/main.bundle.js:32713:17)

   at Anonymous function (http://localhost:4200/main.bundle.js:32710:13)

   at RuntimeCompiler.prototype._compileComponents (http://localhost:4200/main.bundle.js:32708:9)

   at createResult (http://localhost:4200/main.bundle.js:32636:13)

   at ZoneDelegate.prototype.invoke (http://localhost:4200/main.bundle.js:63358:13)

   at Zone.prototype.run (http://localhost:4200/main.bundle.js:63242:17)",

      name: "Error",

      promise: { },

      rejection: { },

      stack: "Error: Uncaught (in promise): TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

TypeError: Unable to set property 'allowCellMerging' of undefined or null reference

   at Function code (Function code:188:1)

   at evalExpression (http://localhost:4200/main.bundle.js:47538:5)

   at jitStatements (http://localhost:4200/main.bundle.js:47544:5)

   at RuntimeCompiler.prototype._compileDirectiveWrapper (http://localhost:4200/main.bundle.js:32803:13)

   at Anonymous function (http://localhost:4200/main.bundle.js:32713:17)

   at Anonymous function (http://localhost:4200/main.bundle.js:32710:13)

   at RuntimeCompiler.prototype._compileComponents (http://localhost:4200/main.bundle.js:32708:9)

   at createResult (http://localhost:4200/main.bundle.js:32636:13)

   at ZoneDelegate.prototype.invoke (http://localhost:4200/main.bundle.js:63358:13)

   at Zone.prototype.run (http://localhost:4200/main.bundle.js:63242:17)

   at resolvePromise (http://localhost:4200/main.bundle.js:63596:25)

   at r",

      Symbol(observable)_h.yoat0puv3z3: undefined,

      Symbol(rxSubscriber)_g.yoat0puv3z3: undefined,

      task: { },

      zone: { }

   }

[Karthick Kuppusamy]

Hi Thuc, 

Thanks for contacting Syncfusion support. 

Please follow up the incident #168253 for your response. 

Regards, 

K.Karthick. 

[horacioj]

Hi,

I'm also trying to integrate ej-angular in an Angular CLI 'vanilla' project.

ng new my-ej-app

cd new my-ej-app

Then, I did what https://www.npmjs.com/package/ej-angular2 says)

npm install ej-angular2 --save             

So far, so good. It was successful, because I've (manually, globally) installed 'typings' some days ago.

The guild also says:

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

"npm run tsc" fail:

 npm ERR! missing script: tsc

"npm run lint" doesn't throw any error. 

Anyway, I'm a total noob to Angular2, Node, etc. I don't know what "npm run tsc" is for, and why do I miss if it cannot be run and/or what's wrong in my windows dev machine.

Up to this point, if I launch the app  ("ng serve"), it works fine (doing nothing, of course).

Then, I've edited \my-ej-app\src\app\app.module.ts

adding under  "import { HttpModule } from '@angular/http';" this code:

// Import the library module

import { EJAngular2Module } from 'ej-angular2';

and adding:  "EJAngular2Module.forRoot()" to the "imports: [ ..." list.

Then is where it fails. In the browser's console I see this error:

Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts

Any ideas what I'm doing wrong? 

Is there a walkthrough showing a simple example about how to integrate ej-angular2 in an Angular CLI project? h

Perhaps, something simple, such as having a button that when clicked a dialog is opened.

<button class="btn btn-primary" (click)="openSimpleDialog()"></button>

<ej-dialog id="basicDialog" title="Dialog">

   This is a simple dialog

</ej-dialog>

Many thanks

[Abinaya Subbiah]

Hi Horacio, 

A support incident has been created under your account and we have answered your queries in that. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 

Abinaya

[Jan Branný]

Hi, 

Today I wanted to start developing a new application with Angular-CLI and ej-angular2, and I ran into the same problem.

Can you please provide information whether the issue has been resolved?

ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/janbranny/Documents/Projects/jb/jb.NG2/my-app/src/app/app.module.ts, resolving symbol AppModule in /Users/janbranny/Documents/Projects/jb/jb.NG2/my-app/src/app/app.module.ts

[Abinaya Subbiah]

Hi Jan, 

Thanks for contacting Syncfusion support. 

The issue “Calling function 'EJAngular2Module', function calls are not supported.”  due to that the recent version of angular-cli updated with Angular v2.3.1. As for now, the Syncfusion JavaScript components supports Angular 2 final release version 2.0.0. We already considered and working on the feature  “Upgrade Syncfusion Angular 2 components to Angular v2.4.0”. This feature will be implemented as soon as possible and also we will let you know once the feature has been rolled out. We appreciate your patience until then. 

So we suggest you to 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”. Refer to the below thread.  To install the specific angular-cli version run the below command. 

npm install -g [email protected]  

https://github.com/angular/angular-cli/issues/2834 

We have also 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/ 

Regards, 

Abinaya S 

[Jan Branný]

Ok.

Thank you for your reply. 

I will use your seed with Webpack. :)

[Abinaya Subbiah]

Hi Jan, 

We are glad to announce that our Essential Studio 2017 Volume 1 Main Release v15.1.0.33 is rolled out and is available for download under the following link.   

https://www.syncfusion.com/forums/128853/essential-studio-2017-volume-1-release-v15-1-0-33-is-available-for-download. 

Also we have published our latest Syncfusion Angular 2 components which support Angular 2 version 2.4.0. Run below command to install latest version of ej-angular 2. 

npm install [email protected] --save 

Refer updated seed applications, to quick-start with Syncfusion JavaScript Angular 2 components and follow the below documentation link for getting started with seed application.   

   

https://help.syncfusion.com/angular-2/gettingstarted/ 

Please revert us back if you need further assist on this. 

Regards, 

Abinaya S 

[Alexander Heim]

Can this be made to work with current versions of angular-cli?  The seed application uses webpack directly, and not Angular CLI.

Reading this thread, I was under the impression that the initial problem had something to do with imcompatibilities in the Angular version. So when I read 

our latest Syncfusion Angular 2 components [..] support Angular 2 version 2.4.0

I assumed, that one now can use angular-cli. However, it does not seem to be the case. Here is, what happens when using @angular/cli release candidate 1.0.0-rc.1: I try the typical setup 

ng new ej-ng2-app
cd ej-ng2-app
npm install [email protected] --save

(adds Angular in version 2.4.9) Then add the Ej Angular module in the app.module.ts:

import { EJAngular2Module } from 'ej-angular2';

@NgModule({

  [...]

  imports: [ ...

    EJAngular2Module.forRoot()

  ]

});

When I then start "ng serve" the application does not compile, but shows the following error:

ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/projects/angular2/ej-ng2-app/src/app/app.module.ts, resolving symbol AppModule in ./ej-ng2-app/src/app/app.module.ts webpack: Failed to compile.

This is essentially the same situation just with with earlier versions of the Syncfusion components and Angular-CLI and has been reported earlier in this thread. The question is: is angular-cli at all supposed to work with the Syncfusion components? Or will it always be necessary to use a custom webpack configuration?

[Milos]

Hi,

I have the same problem like Alexander Heim has, making syncfusion control to work with current version of Angular CLI:

"@angular/cli": "1.0.0-rc.1",

"@angular/compiler-cli": "^2.4.0",

I would be glad to see solution which will overcome this error.

Regards,

Milos

[Abinaya Subbiah]

Hi Milos/Alexander Heim, 

With angular-cli sample, we are also facing the issue “ERROR in Error encountered resolving symbol values statically. Calling function EJAngular2Moduel..” . We can resolve this compilation issue by auto compilation with sample changes. Since, we suggest you to edit and resave any component file to overcome this issue. Refer to the link for issue detail from angular-cli.   

https://github.com/angular/angular-cli/issues/3707 

We have also implemented webpack seed applications, to quick-start with Syncfusion JavaScript Angular 2 components and follow the below documentation link for getting started with seed application.    

    

https://help.syncfusion.com/angular-2/gettingstarted/getting-started-webpack 

 

Please revert us back if you need further assist on this.  

Regards,  

Abinaya S 

[mujef]

Hi,

It is not connected with auto compilation with sample changes. If you create new application as Alexander Heim described you will see the problem.
Your seed application uses webpack (standalone), not angular-cli.

Regards
M.

[Alexander Heim]

Hi Abinaya,

I am not sure, if I understand fully what was being discussed in Angular/CLI issue 3707. But what is definitely not the point is

"[..] edit and resave any component file [..]" 

My example did not even have a real component file other than the dummy, autogenerated app.component. Try to include your EJAngular2 module in app.module and you'll see, it's impossible. Whether or not you save and refresh any file - it does not help.

I would guess that many users will try to embed the Syncfusion components just like I did. Angular/CLI is getting more & more mainstream and vendors of similar component frameworks are featuring it (for example http://www.telerik.com/kendo-angular-ui/getting-started/).

Did you really not see any problem when trying? Would it be possible to publish brief instructions on how to setup an Angular/CLI project? Or publish a seed application, based on Angular/CLI?

Thanks,

Alexander

 

[Kevin Smit]

Hello,

If have the same problem:

Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported.

Is generated an new vanilla angular-cli app.

Angular uses 2.4.9

Here are the steps i followed.

- Create an directory

- ng new my-ej-app

- cd new my-ej-app

- npm install ej-angular2 --save

- npm install syncfusion-javascript

Now comes my additional step i use ng eject

- ng eject

Now the angular-cli compiler will extract the webpack config to your root folder,

Angular-cli uses webpack under the hood. I think its webpack 2 and not webpack 1,

that's been used in the angular2 seed application.

If you look at the extracted webpack config you will notice that typescript compilation 

is done bij an angular component:

{

     "test": /\.ts$/,

     "loader": @ngtools/webpack

}

The tool can be found here:

@NGtools/webpack

This tool is used for typescript compilation wit the AOT - Ahead Of Time Principle.

Sow ok, here stops my rookie knowledge, I just landed here after following different tutorials to get started with

an "Simple", angular2 syncfusion application.

So maybe someone can help dig down deeper as my knowledge stops here. Sow,

Is the syncfusion angular2 lib AOT ready, if not could we edit change some webpack parameter in 

the AOT plugin of the Angular tools to change the outcome, for example switch back to just-In-Time

compilation instead of AOT. If not can we use other typescript loaders to get this thing going.

I waited on the new 2017 release of syncfusion sow that i could use it with angular 2.4.x but still cannot

get it to work with an vanilla generated angular app, i think this could not be hard.

Will a new seed application that has been generated with angular-cli and extracted the webpack config, do the Trick?

sow we can see what's going on under the hood?

I like to get starting using the controls, so any help would be appreciated,

Regards,

Kevin Smit

[Abinaya Subbiah]

Hi Kevin, 

Thanks for the detailed analysis. 

We have analyzed and reproduced the issue “ERROR in Error encountered resolving symbol values statically” with latest Angular-CLI and found the root cause, that “Angular CLI ng-serve/npm start command requires the application needs to be compiled in AOT principle”. We already logged and working on the feature  “AOT supprt for Syncfusion Angular 2 components.” and it will be included in any of our upcoming release. 

To overcome this issue we can use below command. But unfortunately the issue not resolved with that command, so we suggest you to resolve the issue by auto compilation with sample changes. 

 

ng serve --aot false 

Please revert us back if need further assist on this. 

Regards, 

Abinaya S 

[Abinaya Subbiah]

Hi Alexander Heim/mujef, 

 

We have analyzed and reproduced the issue “ERROR in Error encountered resolving symbol values statically” with latest Angular-CLI and found the root cause, that “Angular CLI ng-serve/npm start command requires the application needs to be compiled in AOT principle”. We already logged and working on the feature  “AOT supprt for Syncfusion Angular 2 components.” and it will be included in any of our upcoming release. 

To overcome this issue we can use below command. But unfortunately the issue not resolved with that command, so we suggest you to resolve the issue by auto compilation with sample changes. 

 

ng serve --aot false 

 

We will include the steps to “configure Syncfusion components into angular-cli sample” into our help documentation and publish it at the earliest.  

We have prepared angular-cli sample using latest version of angular-cli, also configured with Syncfusion controls.  

Before working with cli, ensure below environment to run the application.  

• Node JS (v6.x.x or higher).
• NPM (3.x.x or higher).

Refer to the below steps to configure Syncfusion controls into angular-cli project.  

• Install angular-cli globally and create getting started sample with below commands.  

    

npm install -g @angular/cli@latest 

ng new [PROJECT_NAME]    

cd [PROJECT_NAME]    

ng serve --aot false 

 

    

• 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    

 

         

• Import EJAngular2Module from ej-angular2 package to import Angular 2 components into the project. Refer to the below code snippets to import Syncfusion Angular 2 components. 

import { BrowserModule } from '@angular/platform-browser'; 

import { NgModule } from '@angular/core'; 

import { FormsModule } from '@angular/forms'; 

import { HttpModule } from '@angular/http'; 

import { EJAngular2Module } from 'ej-angular2'; 

 

import { AppComponent } from './app.component'; 

 

@NgModule({ 

  declarations: [ 

    AppComponent 

  ], 

  imports: [ 

    BrowserModule, 

    FormsModule, 

    HttpModule, 

    EJAngular2Module.forRoot() 

  ], 

  providers: [], 

  bootstrap: [AppComponent] 

}) 

export class AppModule { } 

 

 

• Refer Syncfusion controls dependencies script and css files from node_modules in angular-cli.json file script and styles section. Refer to the below code snippet.

{ 

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 

  "project": { 

    "name": "clisample" 

  }, 

  "apps": [ 

    { 

      "root": "src", 

      "outDir": "dist", 

      "assets": [ 

        "assets", 

        "favicon.ico" 

      ], 

      "index": "index.html", 

      "main": "main.ts", 

      "polyfills": "polyfills.ts", 

      "test": "test.ts", 

      "tsconfig": "tsconfig.app.json", 

      "testTsconfig": "tsconfig.spec.json", 

      "prefix": "app", 

      "styles": [ 

        "styles.css", 

        "./../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.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" 

      ], 

      "environmentSource": "environments/environment.ts", 

      "environments": { 

        "dev": "environments/environment.ts", 

        "prod": "environments/environment.prod.ts" 

      } 

    } 

  ], 

  "e2e": { 

    "protractor": { 

      "config": "./protractor.conf.js" 

    } 

  }, 

  "lint": [ 

    { 

      "project": "src/tsconfig.app.json" 

    }, 

    { 

      "project": "src/tsconfig.spec.json" 

    }, 

    { 

      "project": "e2e/tsconfig.e2e.json" 

    } 

  ], 

  "test": { 

    "karma": { 

      "config": "./karma.conf.js" 

    } 

  }, 

  "defaults": { 

    "styleExt": "css", 

    "component": {} 

  } 

} 

 

    

• Now, navigate to root of the application and run the application using ng serve and navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

  

ng serve --aot false 

 

Refer to below link for the sample. 

 

Sample 

    

Please revert us back if you need further assistance on this.      

      

Regards,      

Abinaya S   

[Alexander Heim]

Hi Abinaya,

Thanks for your reply. I confirm, that your instructions make the application work with angular cli. I can start / compile the application and use the Syncfusion components. So that works.

However, it's still not entirely convincing. Even, if now, I can create Ej2 components in both - your sample and my test application, I still get these intimidating compiler messages: 

ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/projects/angular2/sf2/src/app/app.module.ts, resolving symbol AppModule in C :/projects/angular2/sf2/src/app/app.module.ts

(on 'ng compile --aot false' and 'ng serve --aot false')

And this message on every change, when the test server ist running:

WARNING in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/ 

Content/ej/web/material/ej.theme.min.css autoprefixer: C:\projects\angular2\sf2\node_modules\syncfusion-javascript\Content\ej\web\material\ej.theme.min.css:10:330880: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css 4:10-157

 @ ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css

 @ multi ./src/styles.css ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css

(on every source code change and subsequent save)

Is that supposed to be normal? 

Anyway, one can work with it now. So thanks for your help,

Alexander

[Abinaya Subbiah]

Hi Alexander, 

We can reproduce warning “Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.”. We have considered this warning and fix for this will be included in our upcoming release. 

A support incident has been created under your account, to track the status of this requirement. Please log on to our support website to check for further updates.  

  

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Please revert us back if you need further assist on this. 

Regards, 

Abinaya S 

[Kevin Smit]

Same here as Alexander Heim  please also include me in the support ticket/solution

Startet also from scratch with an new angular cli project, still getting the error:

 ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported.

PS C:\Users\kevin\Downloads\cli-sample2072672477> ng serve --aot false
** NG Live Development Server is running on http://localhost:4200 **
Hash: 2b1e00b5a607546287bd
Time: 18731ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {5} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 926 kB {5} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 11.4 MB {5} [initial] [rendered]
chunk    {3} main.bundle.js, main.bundle.js.map (main) 4.2 kB {4} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.93 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
WARNING in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/Content/ej/web/material/ej.theme.min.css
autoprefixer: C:\Users\kevin\Downloads\cli-sample2072672477\node_modules\syncfusion-javascript\Content\ej\web\material\ej.theme.min.css:10:330880: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css 4:10-157
 @ ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css
 @ multi ./src/styles.css ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css
ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/Users/kevin/Downloads/cli-sample2072672477/src/app/app.module.ts, resolving symbol AppModule in C:/Users/kevin/Downloads/cli-sample2072672477/src/app/app.module.ts
webpack: Failed to compile.

[Kevin Smit]

Ok tested it again, 

the error goes away when i do the following:

Create an new app with angular -cli

start app with: ng serve --aot false

error comes with the function call .....

now change some code, angular-cli triggers a rebuild in webpack

website is server correctly

Develop machine = Win10

Node: 7.4.0

NPM: 4.0.5

[Abinaya Subbiah]

Hi Kevin, 

We are glad to know that your problem has been solved.  

please let us know if u need any further assistance.  

Regards,  

Abinaya S  

[Thuc]

Hi,

I've just tried again using given instructions, and got the same error above. Is there anything else I missed?
The full logs as below. Code also attached.

D:\Samples\Frontend\Syncfusion>ng new ej-ng-app1

installing ng

  create .editorconfig

  create README.md

  create src\app\app.component.css

  create src\app\app.component.html

  create src\app\app.component.spec.ts

  create src\app\app.component.ts

  create src\app\app.module.ts

  create src\assets\.gitkeep

  create src\environments\environment.prod.ts

  create src\environments\environment.ts

  create src\favicon.ico

  create src\index.html

  create src\main.ts

  create src\polyfills.ts

  create src\styles.css

  create src\test.ts

  create src\tsconfig.app.json

  create src\tsconfig.spec.json

  create src\typings.d.ts

  create .angular-cli.json

  create e2e\app.e2e-spec.ts

  create e2e\app.po.ts

  create e2e\tsconfig.e2e.json

  create .gitignore

  create karma.conf.js

  create package.json

  create protractor.conf.js

  create tsconfig.json

  create tslint.json

Successfully initialized git.

Installing packages for tooling via npm.

Installed packages for tooling via npm.

Project 'ej-ng-app1' successfully created.

D:\Samples\Frontend\Syncfusion>cd ej-ng-app1

D:\Samples\Frontend\Syncfusion\ej-ng-app1>npm install syncfusion-javascript --save

[email protected] D:\Samples\Frontend\Syncfusion\ej-ng-app1

`-- [email protected]

  +-- [email protected]

  +-- [email protected]

  +-- [email protected]

  | `-- [email protected]

  `-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

D:\Samples\Frontend\Syncfusion\ej-ng-app1>npm install ej-angular2 --save

[email protected] D:\Samples\Frontend\Syncfusion\ej-ng-app1

`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

D:\Samples\Frontend\Syncfusion\ej-ng-app1>npm install --save-dev @types/jquery

[email protected] D:\Samples\Frontend\Syncfusion\ej-ng-app1

`-- @types/[email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

D:\Samples\Frontend\Syncfusion\ej-ng-app1>npm install --save-dev @types/ej.web.all

[email protected] D:\Samples\Frontend\Syncfusion\ej-ng-app1

`-- @types/[email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

D:\Samples\Frontend\Syncfusion\ej-ng-app1>code .

D:\Samples\Frontend\Syncfusion\ej-ng-app1>ng serve --aot false

** NG Live Development Server is running on http://localhost:4200 **

Hash: 0be052d37f3d5f2f54b9

Time: 18130ms

chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {5} [initial] [rendered]

chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 926 kB {5} [initial] [rendered]

chunk    {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 11.4 MB {5} [initial] [rendered]

chunk    {3} main.bundle.js, main.bundle.js.map (main) 4.2 kB {4} [initial] [rendered]

chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.93 MB [initial] [rendered]

chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/Content/ej/web/material/ej.theme.min.css

autoprefixer: D:\Samples\Frontend\Syncfusion\ej-ng-app1\node_modules\syncfusion-javascript\Content\ej\web\material\ej.theme.min.css:10:330880: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css 4:10-157

 @ ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css

 @ multi ./src/styles.css ./~/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css

ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/Samples/Frontend/Syncfusion/ej-ng-app1/src/app/app.module.ts, resolving symbol AppModule in D:/Samples/Frontend/Syncfusion/ej-ng-app1/src/app/app.module.ts

webpack: Failed to compile.

Attachment: ejngapp1_1561dcc2.zip

[Abinaya Subbiah]

Hi Thuc, 

All the steps that you have followed is correct. As we discussed previously in this thread, to resolve the issue we suggest you to follow below steps additionally. 

·         Run your sample with below command  

  

ng serve --aot false  

  

·         Sample will run with the issue “ERROR in Error encountered resolving symbol values statically”.  

·         Change some code and save the sample, now sample recompile with success as like the below.  

  

          

Regards, 

Abinaya S 

[Marko]

Hi,
i followed all steps here and the following steps works:

start app with: ng serve --aot false

error comes with the function call .....

now change some code, angular-cli triggers a rebuild in webpack

website is server correctly

but now when i want to make a final build (ng build --aot false) it always return error ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol... and i can not get pass this because here does not come to rebuild when i chang something....

So how can i now build my project?

[Marko]

Ok, i found a solution:
ng build --watch
with this i can make build, but not with aot.

[Subha Shree Ramanathan]

Hi Marko, 

We are glad to know that your problem has been solved. 

As we stated in this thread, we working on the feature “AOT support for Syncfusion Angular 2 Components” and it will be included in any of our upcoming release. 

Please let us know if you need any further assistance. We are always happy to assist you. 

Regards, 

Subha Shree D.R 

[mujef]

ng serve --aot false works OK but how can I build my app to production? I have tried
ng build --prod --aot false
but it breaks with the exception "ERROR in Error encountered resolving symbol values statically. Calling function 'EJAngular2Module'..."

[Abinaya Subbiah]

Hi Mujef,

The issue “ERROR in Error encountered resolving symbol values statically” due to  “Angular CLI ng-serve/npm start command requires the application needs to be compiled in AOT principle”. We already logged and working on the feature  “AOT supprt for Syncfusion Angular 2 components.” and it will be included our Essential Studio 2017 volume 2 release. 

Until that we suggest you to use the option “-watch” with ‘’--prod’ to get a build. To get the production build run the below command, then change some code and save the sample. Now you can find and use dist folder of your application. 

ng build --prod --aot false –watch 

Please let us know if you need further assist on this. 

Regards, 

Abinaya S 

[Nebojsa Zecevic]

Hi all,

not sure if this question is still active but I manage to successfully build and serve Angular CLI created project with syncfusion.

What I did is that i have created one const object of type ModuleWithProviders in my app.module.ts:

import { NgModule, ModuleWithProviders } from '@angular/core';

import { EJAngular2Module } from 'ej-angular2';

const EjModule: ModuleWithProviders = {

    ngModule: EJAngular2Module

};

Then I replaced EJAngular2Module.forRoot() line with my object:

@NgModule({

    declarations: [

        AppComponent,

        SupplierDiscountComponent

    ],

    imports: [

        BrowserModule,

        FormsModule,

        HttpModule,

        EjModule //EJAngular2Module.forRoot()

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

And this allowed me to successfully build and serve my project with Angular CLI.

This resolves the "Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts".

All external scripts for syncfusion, jquery, ... are loaded through angular cli configuration file through styles and scripts configuration.

Note: I'm using current Angular version 4.0.0 with Syncfusion and ej-angular2 version 15.1.41.

[Abinaya Subbiah]

Hi Nebojsa Zecevic, 

 

Thanks for the information. 

 

Please let us know if you need further assist on this. 

 

Regards, 

Abinaya S 

[Andrey Kukharenko]

Hi all,

not sure if this question is still active but I manage to successfully build and serve Angular CLI created project with syncfusion.

What I did is that i have created one const object of type ModuleWithProviders in my app.module.ts:

import { NgModule, ModuleWithProviders } from '@angular/core';

import { EJAngular2Module } from 'ej-angular2';

const EjModule: ModuleWithProviders = {

    ngModule: EJAngular2Module

};

Then I replaced EJAngular2Module.forRoot() line with my object:

@NgModule({

    declarations: [

        AppComponent,

        SupplierDiscountComponent

    ],

    imports: [

        BrowserModule,

        FormsModule,

        HttpModule,

        EjModule //EJAngular2Module.forRoot()

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

And this allowed me to successfully build and serve my project with Angular CLI.

This resolves the "Error encountered resolving symbol values statically. Calling function 'EJAngular2Module', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts, resolving symbol AppModule in /my-ej-app/src/app/app.module.ts".

All external scripts for syncfusion, jquery, ... are loaded through angular cli configuration file through styles and scripts configuration.

Note: I'm using current Angular version 4.0.0 with Syncfusion and ej-angular2 version 15.1.41.

Thanks.

It looks like working for me too.

I use Angular CLI 1.0.0 + Angular 4.0.2.

Issue #1 from my list resolved for now.

[Abinaya Subbiah]

Hi Andrey Kukharenko, 

 

Thanks for the information. 

 

Regards, 

Abinaya S