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

While we render the colorpicker component in Angular-cli application shades are not applied

Platform: Angular |
Control: ejColorPicker

ColorPicker does not allow shades while rendering in the Angular-cli Application.


The gradient styles are not supported in Angular CLI. This is the known issue with bundling in angular CLI environment. Please refer to this link.

The following are the solutions to resolve this issue in your application.

Solution 1:

While using bundling, gradient styles are not applied for ColorPicker component. This issue can be resolved by using our CDN link in the application. We have CDN support for all scripts and style sheets of Syncfusion components. So, please refer to the CDN link of required CSS file in Index.html as in the following code example.


<link href="//cdn.syncfusion.com/" rel="stylesheet">


Solution 2:

Instead of bundling, move the EJ themes directly into the corresponding sample’s theme folder by following the below instructions.

Step 1:

Please insert the following code block in your “package.json” file to copy and paste the theme files into your custom folder.

"scripts": { 


"start""ng serve"

"build""ng build"

"test""ng test"

"lint""ng lint"

"e2e""ng e2e"

"copy-content""xcopy node_modules\\syncfusion-javascript\\Content\\ej\\web dist\\content /y/s/i", 

"serve":"npm run start && npm run copy-content" 



Step 2:

Run the “ng build --prod” command to create the production build.

Step 3:

Run the “npm run copy-content” command to copy the theme files and paste into the destination folder.

Step 4:

Refer to the CSS file in the index.html file as in the following code example.


<link href="../content/material/ej.web.all.min.css" rel="stylesheet"> 

Step 5:

Run the “npm install http-server -g” command to install http server globally in your system. 

Step 6:

Run the “http-server ./dist” command to host your angular CLI application. 


Please get the sample from the following location.

Sample Link:  http://www.syncfusion.com/downloads/support/directtrac/183711/ze/colorPickerCLI-69676432




2X faster development

The ultimate Angular UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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