Embed Bold Reports® Report Server Report

To embed Bold Reports® Report Server reports in the Angular Report Viewer, set the service URL, server URL, report path, and authorization token of your Report Server, without creating a new Web API service. The Bold Reports® Report Server contains a built-in Web API service that displays the reports in your application. You need a Report Viewer Angular application to do the following steps:

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.

Prerequisites

Before you begin, make sure your development environment for the Angular Report Viewer includes the following:

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.

  1. To configure the Report Viewer 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.

    npm install @boldreports/angular-reporting-components --save-dev

  3. 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

  4. 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"
      ],
      . . .
      . . .
    }
  }
}

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

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

  6. Register the @bold-reports/types under the typeRoots node in the tsconfig.json file.

    Css script reference

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:

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

  2. 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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

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

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

  4. 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>

How do I configure the Report Server to render a report?

To render a Bold Reports® Report Server report, the Angular Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. Provide the following information from your Report Server:

  • reportServiceUrl - Report Server Reporting Service information should be provided for this API.
  • reportServerUrl- Report Server Reporting Server information should be provided for this API.
  • serviceAuthorizationToken - Authorization token to communicate with reportServiceUrl.
  • reportPath - Path of the report, formed from the category and report name, as in /{category name}/{report name}.

If you need to know the difference between reportServiceUrl and reportServerUrl, refer to the Difference between Report Service URL and Report Server URL.

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

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

Follow one of these procedures based on your Report Server type:

Enterprise Reporting Report Server

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see how to generate an access token for Bold Reports® Report Server.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.serviceAuthorizationToken = 'bearer <server token>';
  }
}

    To generate the token within an application, see how to generate an access token for a Bold Reports® Report Server user.

  • Set the Bold Reports® Report Server built-in service URL to the reportServiceUrl property. The reportServiceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Viewer.

      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 reportServerUrl: string;
    public reportPath: string;
    public serviceAuthorizationToken: string;

    constructor() {
      this.reportServiceUrl = 'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
      this.serviceAuthorizationToken = 'bearer <server token>';
    }
  }

  • Set the Bold Reports® Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.

      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 reportServerUrl: string;
    public reportPath: string;
    public serviceAuthorizationToken: string;

    constructor() {
      this.reportServerUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1';
      this.reportServiceUrl = 'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
      this.serviceAuthorizationToken = 'bearer <server token>';
    }
  }

  • Set the path of report in reportPath property.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.reportServerUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1';
    this.reportServiceUrl = 'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer';
    this.serviceAuthorizationToken = 'bearer <server token>';
    this.reportPath = '/Sample Reports/Product Line Sales';
  }
}

Cloud Reporting server

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see how to generate an access token in Bold Reports® Cloud.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.serviceAuthorizationToken = 'bearer <server token>';
  }
}

To generate the token within an application, see how to generate an access token for a Bold Reports® Cloud user.

  • Set the Bold Reports® Report Server built-in service URL to the reportServiceUrl property. The reportServiceUrl property value is a https://service.boldreports.com/api/Viewer.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.reportServiceUrl = 'https://service.boldreports.com/api/Viewer';
    this.serviceAuthorizationToken = 'bearer <server token>';
  }
}

  • Set the Bold Reports® Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.reportServiceUrl = 'https://service.boldreports.com/api/Viewer';
    this.serviceAuthorizationToken = 'bearer <server token>';
  }
}

  • Set the path of report in reportPath property.

    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 reportServerUrl: string;
  public reportPath: string;
  public serviceAuthorizationToken: string;

  constructor() {
    this.reportServerUrl = 'https://acmecorp.boldreports.com/reporting/api';
    this.reportServiceUrl = 'https://service.boldreports.com/api/Viewer';
    this.serviceAuthorizationToken = 'bearer <server token>';
    this.reportPath = '/Sample Reports/Product Line Sales';
  }
}

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.