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:
-
The Angular Report Viewer requires jQuery peer dependencies. To install it use the following command:
npm install --save jquery
-
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
-
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' } }
-
Import the
TelerikReportingModule
in your application root module:import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer'; @NgModule({ imports: [TelerikReportingModule]
-
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' }; }
-
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.
-
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 ofindex.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 toNone
:import { Component, ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None
-
Run the application:
npm run start