Integrating the Angular Report Viewer with SystemJS

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