How to Load a Report from the Report Server to an Angular 12 Application

I will walk you through creating an Angular 12 application and the steps to load an already published SSRS RDL report from the Bold Reports Report Server.

The Report Server is a report management studio provided by Syncfusion that allows users to create, manage, and share reports securely and easily. Bold Reports Report Server provides a built-in REST API service that helps you display and manage the server’s reports.

Prerequisites

. Node.js (version 8 or higher)
. NPM (version 3 or higher)

Generate personal access token

Log in to Bold Reports Report Server.

Server Login

Click on the user avatar icon in the left navigation bar. Click the user profile. You will be redirected to the My Profile page. Click Personal Access Token in the top panel.

Personal access token

Click the click to copy icon for the generated access token.

Click to copy

Create the Angular 12 application

Install the Angular CLI. If you are using an earlier version of Bold Reports for Angular(v3.3.32 or earlier), then refer to the Getting Started for Earlier Versions tutorial globally in the system by running the following npm install command in the command prompt.

npm install -g @angular/cli@latest

Note: The Angular CLI is a command-line interface tool that allows you to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Create a new Angular application by running the following new command in the command prompt.

ng new project-name E.g.: ng new reportviewerapp

The new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing Enter pressing Enter.

*Configure Report Viewer *

Run the change directory command in the command prompt to change the directory to the Angular 12 application root folder.

cd project-name E.g.: cd reportviewerapp

Install the Bold Reports Angular library in the Angular application by using the npm install The library should be installed as a dev dependency by running the following command.

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

Install @boldreports/types in the Angular 12 application by executing the following command.

npm install --save-dev @boldreports/types

Open the Angular application root folder in Visual Studio Code for editing purposes.

Open the app.json file, add @boldreports/types and @types under the typeRoots array, and add jQuery and reportsunder the types array. @boldreports/types provide the TypeScript definition for Bold Reports.

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

Open the polyfills.js file from the src folder and import jQuery. Here, window refers to the global object on the client side. The Report Viewer control requires window.jQuery to render the component.

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

Add the CSS reference

1. Open the json file.

2. Register bold.all.min.css under the style array. bold.reports.all.min.css includes the CSS properties for the reporting components. Angular 12 will throw common or AMD dependencies that can cause an optimization bailouts warning due to adding the scripts in the app.module.ts file because they use the AMD module loader.

3. Add the Report Viewer, bullet graph, and chart scripts within the allowedCommonJS dependency section to remove the warning add the Report viewer , Bullet Graph and chart scripts within the allowedCommonJSDependency should be added under the options section, and the o*ptions* section will be available under the Angular application name section.

Add the Report Viewer component

Open the module.ts file from the app folder.

Replace the following code sample in the module.ts file.

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 { }

The following table shows the necessary imported scripts and their purposes in the Report Viewer control.

@boldreports/angular-reporting-component- Provides the UI component for the Angular Report Viewer control.
ej.bulletgraph.min- Renders the bullet graph and chart report items in the Report Viewer control.
ej.chart.min
Bold.reports-viewer.min -Imported for rendering the Report Viewer control.

Reference the scripts

1. Open the html file from the src folder.

2. Refer to the following scripts in the head tag and format the document.
   

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

Configure the Report Viewer template

1. Open the component.html file and initialize the Report Viewer.

2. Replace the following code sample in the component.html file.
   

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

Note: bold-reportviewer is an element that represents a new Bold Report viewer control. id is a string that specifies the unique name for the Report Viewer control. reportserviceUrl includes the service URL of the Report Server. Service authorization token includes the authorization token value, which is retrieved from the server. **reportPath **is used to set the path of the report, style includes the width and height for the Report Viewer control, and reportserviceUrl saves the file.

Configure the Report Viewer control

1. Open the app.component.ts file.

2. Replace the following code sample.
   

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 properties here.
}
}

In the code we are replacing, the report service URL specifies the web API service URL. It contains the server name, service name, and API name. The format of the report service URL is “http://reportservername/reporting/reportservice/api/Viewer.” You can use your report server. reporting/reportservice represents the service name of the Report Server and api/Viewer represents the web API name of the Report Server.

1. Enter the report server URL inside the constructor. The report service URL specifies the server name and site information. The format of the report server URL is “http://reportservername/reporting/api/site/sitename.” You can use your Report Server name. Site/sitename represents the site from which you will load the report in the Report Viewer control. You can enter your site name.

2. Enter the service authorization token inside the constructor. This specifies the personal authorization token copied from the Report Server.

3. Assign the value for the report path inside the constructor to specify the path in which the RDL report file is published in the Report Server.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';
}
}

1. Save the file.

2. Run the ng serve command in the command prompt to preview the report. The browser opens to the URL “http://localhost:4200,” and the report is loaded in the Report Viewer control.

Load report from Cloud Report Server

1. The steps that need to be followed to load a report from the Cloud Report Server are the same as those in the previous section, but the report service URL and the Report Server URL differ based on your cloud server configuration.

2. Since the service for cloud reporting is hosted separately, reporting/reportservice is not set in the report service URL. Also, since multitenancy is not supported in the cloud reporting server, site information is not required in the report server URL.

3. You need to generate the service authorization token from the Cloud Report Server, add it to the application, and add the path of the report you want to render in the Report Viewer.

Visit:https://www.boldreports.com/contact/https://www.boldreports.com/contact/

Conclusion
Now that I have shown you how to load a report from the report server in an Angular 12 application using Bold Reports, I hope you are comfortable with doing it yourself.

Check out Bold Reports demos and documentation to learn more. If you have any questions, please post them in the comments section below. You can also contact us through our contact page, or if you already have an account, you can log in to ask your support question.

Bold Reports offers a 15-day free trial that does not require a credit card. We invite you to sign up and experience Bold Reports for yourself. Give it a try and let us know what you think!
Now that I have shown you how to load a report from the report server in an Angular 12 application using Bold Reports, I hope you are comfortable with doing it yourself.