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

To display an already created SSRS RDL report in the Bold Reports^® Angular Report Viewer without using a Report Server, create an Angular reporting application in Angular CLI and follow these steps.

This guide applies to Angular version 17.x and above. If you are using an earlier version, refer to the Getting Started for Earlier Version.

In Angular version 20.x and above, certain filenames have been updated. For example, the file previously named app.component.ts is now renamed to app.ts.

To get started quickly with Report Viewer, you can check this video:

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

To display an SSRS RDL report in the Bold Reports^® Angular Report Viewer, 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 20.x or 22.x and above) Version Compatibility.
NPM (v10.x.x or higher)

Install the Angular CLI

Angular provides the easiest way to set Angular CLI projects using the Angular CLI tool. To install the CLI application globally on your machine, run the following command in the Command Prompt.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, see the Angular CLI commands reference.

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 in Angular CLI

The Bold Reports^® reporting tools packages are distributed in npm as @boldreports/angular-reporting-components.

To configure the Report Viewer component, change the directory to your application’s root folder.
```
cd project-name

E.g: cd reportviewerapp
```
Run the following commands to install the Bold Reports^® Angular library.
```
npm install @boldreports/angular-reporting-components --save-dev
```

Install the typings dependencies jquery, types/jquery and boldreports/types.

npm install --save-dev jquery
npm install --save-dev @types/jquery
npm install --save-dev @boldreports/types

Refer the jQuery script file (jquery.js) as given in the angular.json file within the projectname > scripts section (For example, reportviewerapp > scripts).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "reportviewerapp": {
      "root": "src",
      "outDir": "dist",
      . . .
      . . .
      "styles": [
        "src/styles.css"
      ],
      "scripts": [
        "./node_modules/jquery/dist/jquery.js"
      ],
      . . .
      . . .
    }
  }
}

Add the typings jquery, and reports.all to the tsconfig.app.json file.

{
  ...
  ...
  "compilerOptions": {
    ...
    ...
    "baseUrl": "",
    "types": [
      "jquery",
      "reports.all"
    ]
  },
  ...
  ...
}

Adding CSS reference

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

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "reportviewerapp": {
      "root": "src",
      "outDir": "dist",
      . . .
      . . .
      "styles": [
        "styles.css",
        "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css"
      ],
      "scripts": [
        "./node_modules/jquery/dist/jquery.js"
      ],
      . . .
      . . .
    }
  }
}

In the previous code, the tailwind-light theme is used. You can modify the theme based on your application by using the following syntax: ./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/[theme-name]/bold.report-viewer.min.css

Adding Report Viewer component

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

Open the app.ts or app.component.ts file.

You can replace the following code snippet in the app.ts or app.component.ts file.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
// Report viewer
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

@Component({
  selector: 'app-root',
  imports: [CommonModule, BoldReportViewerModule],
  templateUrl: './app.html', // or app.component.html
  styleUrls: ['./app.css'] // or app.component.css
})
export class AppComponent {
  public reportServiceUrl: string;
  public reportPath: string;

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

Open the app.html or app.component.html file and initialize the Report Viewer.

You can replace the following code snippet in the app.html or app.component.html file.

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

Create Web API service

The Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports, or create one of the following Web API services:

If you are looking to load the report directly from the SQL Server Reporting Services (SSRS), then you can skip the following steps and move to the SSRS Report.

Adding already created report

If you have created a new service, you can add the reports from the Bold Reports^® installation location. For more information, refer to the samples and demos section.

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

This tutorial uses the sales-order-detail.rdl report. Download the sales-order-detail report.

Refer to the create RDL report section for creating new reports.

Set report path and Web API service

To set the report path and the Web API service, open the app.ts or app.component.ts file and add the code as in the constructor.

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
    // data-visualization
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
    // Report viewer
    import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

    @Component({
      selector: 'app-root',
      imports: [CommonModule, BoldReportViewerModule],
      templateUrl: './app.html', // or app.component.html
      styleUrls: ['./app.css'] // or app.component.css
    })
    export class AppComponent {
      public reportServiceUrl: string;
      public reportPath: string;

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

In the preceding code, the reportServiceUrl uses an online URL. You can host the Bold Reports^® service at any Azure, AWS, or own domain URL and use it in the Report Viewer. You can view the already created Web API service from the Reporting Service GitHub location.

Open the app.html or app.component.html to set the reportPath and reportServiceUrl properties of the Report Viewer 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:

Navigate to the root of the application and run the application using the following command.
```
ng serve
```
Navigate to the appropriate port http://localhost:4200 in the browser.

Note: You can refer to our feature tour page for the Angular Report Viewer to see its innovative features. Additionally, you can view our Angular Report Viewer examples which demonstrate the rendering of SSRS RDLC and RDL reports.

Display SSRS RDL report in Bold Reports® Angular Report Viewer