Remove Components from telerik-blazor.js

Environment

Product

UI for Blazor, PDF Viewert for Blazor, Spreadsheet for Blazor

Description

This KB article answers the following questions:

• How to build the telerik-blazor.js file without some of the components?
• How to exclude components from the Telerik Blazor JSInterop file and rebuild telerik-blazor.js?
• How to remove components from the client-side code of Telerik UI for Blazor?
• How to remove the Spreadsheet component from telerik-blazor.js in order to achieve strict Content Security Policy compliance?
• How to remove the PDF Viewer component from telerik-blazor.js in order to avoid conflicts with other third-party tools that depend on PDF.js?
• How to reduce the file size of the Telerik Blazor JavaScript asset?

Solution

Here are the required steps to exclude Telerik UI for Blazor components from telerik-blazor.js and rebuild the Telerik JSInterop file.

1. Login to your Telerik account.
2. Download the source code of Telerik UI for Blazor.
3. Read the Readme.txt in the root folder of the downloaded ZIP archive. It provides information about JavaScript build pre-requisites and where to find the newly built file.
4. Delete the unwanted component folder from /javascript/src/, for example:
   • pdf-viewer for the PDF Viewer
   • spreadsheet for the Spreadsheet
5. Remove the export statement for the unwanted component from /javascript/src/main.ts, for example:
   • export * from './pdf-viewer/main'; for the PDF Viewer
   • export * from './spreadsheet/main'; for the Spreadsheet
6. Remove any existing dependencies for the unwanted component from /javascript/package.json, for example:
   • @progress/kendo-pdfviewer-common for the PDF Viewer
   • @progress/kendo-spreadsheet-common for the Spreadsheet
7. Delete /javascript/package-lock.json
8. Run npm install in the javascript folder.
9. Run gulp build-cdn in the javascript folder.
10. Copy the generated telerik-blazor.js file to the wwwroot folder or your Blazor app.
11. Remove the existing telerik-blazor.js file registration as a static asset or CDN URL. Register the custom telerik-blazor.js from wwwroot.

Repeat the above steps and rebuild telerik-blazor.js after every version update of Telerik UI for Blazor.

See Also

• Adding Telerik UI for Blazor to a Blazor app