New to Telerik Reporting? Download free 30-day trial

How to Use Angular Report Viewer with SystemJS

This article demonstrates how to add the Angular Report Viewer component to an Angular application with a SystemJS module loader. It shows the steps to implement the required configuration when you use the Angular Quickstart project template. As a result, we create a new Angular application with settings similar to these of the local AngularDemo project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\SystemJS.

To use the Angular Report Viewer with SystemJS, you must explicitly list the package entry points.


The following list describes the prerequisites for this tutorial:

  • Review the Angular Report Viewer Requirements.

  • A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

  • Copy of the "Product Catalog.trdp" report file from [TelerikReporting_InstallDir]\ReportDesigner\Examples in the folder used by the ReportFileResolver in the Reporting REST service implementation.

  • Entry with the default connection string used by Telerik Reporting sample reports in the web.config file of the project hosting the Reporting REST service:

     <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                providerName="System.Data.SqlClient" />

    Clone Angular Quickstart

If you don't have an Angular 4 SystemJS application, clone the Angular Quickstart project into a local folder with the following command:

git clone
cd quickstart
npm install

Add the Angular Report Viewer Package

All paths and url links in the described steps must be adapted to your project setup.


  1. The Angular Report Viewer requires jQuery peer dependencies. To install it use the following command:

    npm install --save jquery
  2. The Telerik Angular Report Viewer package is published in the public NPM registry. To install the package, run:

    npm install --save @progress/telerik-angular-report-viewer
  3. Configure SystemJS The configuration file, which SystemJS uses, is in the project template under src/systemjs.config.js. To add the Angular Report Viewer and jQuery configuration to the map and packages section, use the following example:

    map: {
    '@progress': 'npm:@progress',
    '@telerik': 'npm:@telerik',
    'jquery': 'npm:jquery/dist/jquery.js',
    packages: {
    // Telerik Angular Report Viewer package
    '@progress/telerik-angular-report-viewer': {
      main: 'dist/cjs/main',
      format: 'cjs',
      defaultExtension: 'js'
  4. Import the TelerikReportingModule in your application root module :

    import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
    imports: [TelerikReportingModule]
  5. Add the desired report viewer container style using a property of the AppComponent class:

    export class AppComponent {
    viewerContainerStyle = {
      position: 'relative',
      width: '1000px',
      height: '800px',
      ['font-family']: 'ms sans serif'
  6. Use the report viewer selector in the AppComponent template:

        report: 'Product Catalog.trdp',
        parameters: {}

    For all available report viewer options, refer to Options.

  7. Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the <head> element of index.html:

    <!-- The required Less-based styles -->
    <link href="" rel="stylesheet" />
    <link href="" rel="stylesheet" />

    To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files or the NPM packages (Getting the Sass-Based Themes).

    If you use the styleUrls attribute to reference the CSS, it is required to set the view encapsulation to None :

    import { Component, ViewEncapsulation } from '@angular/core';
    encapsulation: ViewEncapsulation.None
  8. Run the application:

    npm run start
In this article