Integrating the Angular Report Viewer with SystemJS

Starting with the Q1 2024 release, the SystemJS Angular examples is no longer distributed with the product and this article will receive no further updates.

This article elaborates on 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 systemjs project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\.

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

Prerequisites

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 UriReportSourceResolver in the Reporting REST service implementation.

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

  XML-based configuration file:

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

  JSON-based configuration file:

  "ConnectionStrings": {
      //This connection string will use System.Data.SqlClient as data provider invariant name.
      //"Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"
  
      //This connection string explicitly states the data provider invariant name - mandatory for databases other than MSSQL Server.
      "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
          "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
          "providerName": "System.Data.SqlClient"
      }
  }
  

Clone Angular Quickstart

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

git clone https://github.com/angular/quickstart.git
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.

Steps:

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';
   @NgModule({
       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:

   <tr-viewer
       [containerStyle]="viewerContainerStyle"
       [serviceUrl]="'http://localhost/api/reports'"
       [reportSource]="{
           report: 'Product Catalog.trdp',
           parameters: {}
       }"
       [viewMode]="'INTERACTIVE'"
       [scaleMode]="'SPECIFIC'"
       [scale]="1.0">
   </tr-viewer>
   

   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="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
   <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" 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 are using the styleUrls attribute to reference the CSS, it is required to set the view encapsulation to None:

   import { Component, ViewEncapsulation } from '@angular/core';
   @Component({
       encapsulation: ViewEncapsulation.None
   

8. Run the application:

   npm run start