We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

css loading issue at the time initial rendering of app

Thread ID:





145214 Jun 12,2019 02:42 PM UTC Jun 14,2019 02:17 PM UTC Angular - EJ 2 3
Tags: General
Asked On June 12, 2019 02:42 PM UTC

When the app is rendering at initial times,css loading for sync fusion components is very late ,so that it leads to below problem mentioned in screenshot

But actual rendering should be like

Jesus Arockia Sankaran S [Syncfusion]
Replied On June 13, 2019 01:01 PM UTC

Hi Goutham, 

Greetings from Syncfusion. 

We suspect that you might use our complete CSS file in your application, and we suggest you to refer the CSS files of the components used in your application. We created a sample application for your reference that you can download form the link below. 

Please get back to us if you require any further assistance on this. 

Jesus Arockia Sankaran S 

Replied On June 13, 2019 03:49 PM UTC

Thank you for quick response.

But we are making use of almost every sync fusion components (about 70-80%)

Like below mentioned ,we have included the scss files


Before we have used even more individual ways like below mentioned

But still problem persists.
Can u please get me out of this.

Thanks in advance.

Jesus Arockia Sankaran S [Syncfusion]
Replied On June 14, 2019 02:17 PM UTC

Hi Goutham, 

Thanks for your update.  

We suspect that you use the "ng serve" command to run the application in development mode, and if so, the SCSS will be complied in runtime, which may affect the initial loading. We suggest you use the command "ng build --prod" to build the application in production mode, which will place the compiled files in the “dist” folder. 

Initial loading is usually affected by the size of script and style files, and we ask you to check all of your non-Syncfusion dependency reference. We've also created a sample with Sidebar, Grid and Calendar in Angular where we can't reproduce the reported issue in development and production mode. 

You must either host the application in a webserver or use any of the available local webservers such as the "live-server" NPM package / Web Server for Chrome to check the production build. 
  1. Open the Command Prompt of  your machine.
  2. Install the “live-server” NPM package using “npm i live-server   -g”.
  3. Navigate to the sample location.
  4. Open the command Prompt form the ”dist” folder of the sample.
  5. Run the command “live-server” to run the sample using the production build.
Note: For Angular 8 applications, target in “tsconfig.json” should be “es5”. 
Please get back to us if you need any further assistance on this. 
Jesus Arockia Sankaran S 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon