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.