New to Telerik Reporting? Download free 30-day trial

Create Angular 6+ Applications Working with Local Resources

Environment

Product Progress® Telerik® Reporting
Viewer Angular Viewer

Description

How can I integrate the Telerik Angular Report Viewer in an Angular 6 or higher application that works with local resources and doesn't reference any CDNs?

Solution

After upgrading to Angular 6, the angular-cli.json is replaced with the angular.json file.

In addition, the local stylesheet which, by default, represents CDN links, must be loaded as local files that should be placed in the assets folder. For more information, refer to the Unable to load the CSS file in Angular 6 applications Stackoverflow thread.

You need to download the stylesheet files (e.g. kendo.common.min.css and kendo.blueopal.min.css), for example, from the corresponding CDNs and save them in the src\assets folder of the Angular application.

Then, you have to load the styles in the index.html of the application from the local folder like shown below:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DreamApp</title>
        <base href="/">

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="assets/kendo.common.min.css">
        <link rel="stylesheet" type="text/css" href="assets/kendo.blueopal.min.css">
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

To download the sample application, go to our Angular 6 Sample.

See Also

In this article