Display SSRS RDL report in Bold Reports® Angular Report Viewer Classic

To display an already created SSRS RDL report in the Bold Reports® Angular Report Viewer Classic without using a Report Server, create an Angular CLI application, install the @boldreports/angular-reporting-components package, and set the report path and Web API service URL.

To get started quickly with the Angular Report Viewer Classic, watch the following video:

What do I need before adding the classic Report Viewer to an Angular app?

To add the Bold Reports® Angular Report Viewer Classic, your development environment needs Node JS and NPM at the versions listed below.

Before you begin, make sure your development environment includes the following:

  • Node JS (version 8.x or 10.x and above).
  • NPM (v3.x.x or higher)

Install the Angular CLI

To install the Angular CLI globally on your machine, run the following command in the Command Prompt. The Angular CLI tool is the easiest way to set up Angular CLI projects for the Report Viewer Classic.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, see the Angular CLI repository on GitHub.

Create a new application

To create a new Angular application, run the following command in the Command Prompt.

ng new project-name

E.g : ng new reportviewerapp

The ng new command prompts you for information about features to include in the initial application project. Accept the defaults by pressing the Enter or Return key.

Accept the initial application project defaults by pressing the Enter or Return key

Configure the Bold Reports® Report Viewer Classic in Angular CLI

The Bold Reports® Angular Report Viewer Classic is distributed in the npm package @boldreports/angular-reporting-components.

  1. To configure the Report Viewer Classic component, change the directory to your application’s root folder.

    cd project-name

E.g: cd reportviewerapp

  2. Run the following commands to install the Bold Reports® Angular library.

    Angular version NPM package installation
    12 or greater than 12 npm install @boldreports/angular-reporting-components@latest —save-dev
    lesser than 12 npm install @boldreports/[email protected] —save-dev

    Note: It is important to exercise caution during the package installation process to avoid potential complications with package compilation.

  3. Also, install the Bold Reports® typings by running the following command.

    npm install --save-dev @boldreports/types

  4. Register the @bold-reports/types under the typeRoots and add the typings jquery and reports.all to the tsconfig.app.json file.

    {
  ...
  ...
  "compilerOptions": {
    ...
    ...
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@boldreports/types"
    ],
    "types": [
      "jquery",
      "reports.all"
    ]
  },
  ...
  ...
}

  5. The Report Viewer Classic requires a window.jQuery object to render the component.

    • For Angular version 12 or higher, create a file src/globals.ts and import jQuery as in the following code snippet:

      import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;
      • In the src/app/app.module.ts file, import the src/globals.ts file prior to importing the Bold Reports viewer or designer component in the app.module.ts. 
        import './../globals';

    • For Angular version lesser than 12, import jQuery into the src/polyfills.ts file as shown in the following code snippet:

      import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;

Adding CSS reference

Add the Report Viewer Classic component style (bold.reports.all.min.css) as given in the angular.json file within the projectname > styles section (For example, reportviewerapp > styles).

If you are using an Angular 6 or lower version project, add the changes to the angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "reportviewerapp"
  },
  "reportviewerapp": [
    {
      "root": "src",
      "outDir": "dist",
       . . .
       . . .
      "styles": [
        "styles.css",
         "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css"
      ],
      "scripts": [],
       . . .
       . . .
      }

In the previous code, the material theme is used. To use another theme for your application, follow this syntax: ./node_modules/@boldreports/javascript-reporting-controls/Content/[theme-name]/bold.reports.all.min.css

Adding Report Viewer Classic component

To add the Report Viewer Classic component, refer to the following steps:

  1. Open the app.module.ts file.

  2. Replace the code in the app.module.ts file with the following code snippet:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
import { AppComponent } from './app.component';

// Report viewer
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';

// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
    BrowserModule,
    BoldReportViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  3. Open the index.html file and refer to the following scripts in the <head> tag.

    <!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

  4. Open the app.component.html file and initialize the Report Viewer Classic.

  5. Replace the code in the app.component.html file with the following code snippet:

    <bold-reportviewer id="reportViewer_Control" style="width: 100%;height: 950px">
</bold-reportviewer>

  6. Open the app.component.ts and replace the following code example:

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportviewerapp';
  public serviceUrl: string;
  public reportPath: string;

    constructor() {
        // Initialize the Report Viewer Classic properties here.
    }
}

    If you get the issue 'ej' is not defined after the previous configuration in Angular CLI version 7, add the following code snippet to your application. Add it where you render the Syncfusion® Components (model file) to resolve the issue.

    `/// <reference types="reports.all" />`

Adding already created report

  1. Create a folder Resources in your Web API application to store the RDL reports and add already created reports to it.

  2. Add already created reports to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and you can download the sales-order-detail.rdl sample report.

Set report path and Web API service

To set the report path and the Web API service for the Angular Report Viewer Classic, open the app.component.ts file and add the following code to the constructor.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jsreport-sample';
  public serviceUrl: string;
  public reportPath: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
    }
}

Open the app.component.html to set the reportPath and reportServiceUrl properties of the Report Viewer Classic as in the following:

<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [reportPath] = "reportPath" style="width: 100%;height: 950px">
</bold-reportviewer>

Serve the application

To serve the application, follow these steps:

  1. Navigate to the root of the application and run the application using the following command.

    ng serve

  2. Navigate to the appropriate port http://localhost:4200 in the browser.

  3. Click the view option to view the demo.