1. Home
  2. Forum
  3. Angular - EJ 2
  4. Data not showing when deployed

Data not showing when deployed

Hello everyone.

I am using angular grid component as a way to show data. 

When I serve my app with "ng serve" control everything works fine, data is loaded and displayed correctly.

When I deploy my app via "ng build" so I can deploy it to remote server, my data is not displayed. Instead, it only shows spinner that is not used in my application at all.

Any help would be appreciated.

Console error:Javascript Console error.PNG


Image of working grid:

Working grid.png


Not working grid:



11 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team November 15, 2021 12:08 PM UTC

Hi Ivan, 
 
Greetings from Syncfusion support. 
 
We checked the problem by creating a similar Grid sample(based on the shared code files) and deployed the app using ‘ng build’ on IIS. On doing this we were unable to reproduce the problem as the Grid was properly rendered. Please check the below sample prepared based on this for your reference, 
 
 
We suspect that you might be facing problem due to duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 
 
  • Delete package.lock.json file from your application.  
  • Remove the @syncfusion package folder from the node_modules.
  • Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
  • Then install the NPM packages.
 
Once installed, generate the build files, clear the browser cache and try deploying the sample and check if the problem is resolved. Also try opening it in other browsers. 
 
If problem still persists then please share us the following information to validate further on this, 
 
  • Please try hosting the generated build files in the ‘dist’ folder of the above shared sample and let us know if it is working properly for you.
  • Share us the package.json file of your application.
  • If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample. It would be helpful to identify your exact problem case and validate further based on that.
 
Regards, 
Sujith R 


IG Ivan Galetic November 15, 2021 12:27 PM UTC

Hello,


I will try everything that you listed and return to you with update.


In the meantime, is it possible that version of "compilerOptions" in tsconfig.json has anything to do with it ? 


SK Sujith Kumar Rajkumar Syncfusion Team November 16, 2021 07:23 AM UTC

Hi Ivan, 
 
Thanks for the update. We will wait to hear from you. 
 
And regarding this query – “In the meantime, is it possible that version of "compilerOptions" in tsconfig.json has anything to do with it ?”, we are not able to identify the exact problem cause currently since it is only occurring on hosting your generated build files whereas the same case is working properly from our end. So after ensuring the cases that we have mentioned if problem still persists, then please share us the tsconfig.json file of your application also to ensure with your configured settings. 
 
Regards, 
Sujith R 


IG Ivan Galetic November 16, 2021 11:21 AM UTC

Hello Sujith,


thank you for everything.

Issue has been resolved by doing all the above steps you wrote.


Regards,


Ivan


JC Joseph Christ Nithin Issack Syncfusion Team November 17, 2021 06:38 AM UTC

Hi Ivan,

  Thanks for your update.

  We are glad that provided solution resolved your issue.

   Please get back to us for more queries regarding this.

Regards,
Joseph I


IG Ivan Galetic December 1, 2021 11:09 AM UTC

Greetings,

I have one more question regarding this or at least similiar problem.


When I did steps above, my deployment issue was solved. Tables are displayed correctly in my app. 

Although, one thing I noticed. Previously I was using version 19.1.69 of @syncfusion/ej2-angular-grids and when I did deploy with that version I was getting errors above, updating to latest solved it, atm version 19.3.53.


In my app I have a form that pops up as result of editing table row. In that form I have few controls, among other things, few ejs-grids. 

When using version 19.1.69 those tables are displayed correctly, when using 19.3.53 tables are not shown at all.

Pictures below:

Data Shown(19.1.69):


Data not shown (19.3.53):


In zip I am sending ts files and htmls.


Thank you in advance,

Ivan


Attachment: files_e575f736.7z

SK Sujith Kumar Rajkumar Syncfusion Team December 3, 2021 12:25 PM UTC

Hi Ivan, 
 
Based on the query we could understand that you are facing problem of Grid data not loaded on trying to render Grid in a popup control. In the shared code file we could see that you are binding data for the mentioned Grid on API call success. So we suspect that the data assigning is occurring when the Grid is getting initialized and causing conflicts with the render process leading to data not getting loaded properly. So we suggest you to try calling the Grid’s freezeRefresh method(“this.gridContract.freezeRefresh()”) after assigning the data to the Grid’s dataSource property and check if the problem is resolved(You can also try setting the data in a timeout function to check if it is working for your case). 
 
If problem still persists, then please share us the following information to validate further, 
 
  • Can you please confirm us if the reported problem is the data not loaded in Grid or if the Grid itself is not rendered.
  • Are any console errors thrown? If so please share it.
  • Let us know from where you are opening the popup which has Grid inside it and which popup control you are using.
  • Share us a sample data structure bound in the Grid.
 
Regards, 
Sujith R 


IG Ivan Galetic January 20, 2022 10:33 AM UTC

Hello,


I have not been working on this project for a while, now I'm back at it, hope we can resolve this issue.


Calling the above method did not work, problem still persist. 


Can you please confirm us if the reported problem is the data not loaded in Grid or if the Grid itself is not rendered

We retrieve data using crud service and data is succesfully loaded into grid, there is no errors in code. Only grid itself is not rendered.

Are any console errors thrown? If so please share it.

Only consolse error I get is the one on picture below:



Let us know from where you are opening the popup which has Grid inside it and which popup control you are using

We have one grid (in fact, the one where this problem began, at the top of this forum post) where we are showing some data and when row is cdoubleclicked or when row is clicked and then button pressed (on table toolbar) popup opens. Code below:


modalService and BaseDialogComponent are all from ng-bootstrap.


Share us a sample data structure bound in the Grid

In zip in attachment.


Hope to hear from you soon.


Sincerely,

Ivan



Attachment: files_4e5562fe.7z

SK Sujith Kumar Rajkumar Syncfusion Team January 21, 2022 12:29 PM UTC

Hi Ivan, 
 
We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. 
 
Regards, 
Sujith R 


IG Ivan Galetic January 25, 2022 10:34 AM UTC

Hello,


I just want to post solution that you provided during our meeting.




Thank you for everything. :)




Marked as answer
RR Rajapandi Ravi Syncfusion Team January 26, 2022 09:27 AM UTC

Hi Ivan, 

We are happy to hear that the provided solution work fine at your end. 

Please get back to us if you need further assistance. 

Rajapandi R 


Loader.
Up arrow icon