Angular is one of the most widely used front-end frameworks and it has recently launched a major release, version 9.0. This version of Angular uses Ivy as its default compiler, which was previously under preview.
Bold Reports by Syncfusion always keeps up with the latest releases and we are very happy to announce that Bold Reports Angular components from version 2.2.28 are compatible with Angular 9 with the Ivy compiler.
In this blog, we are going to walk you through how to create a Bold Report Viewer component using the Angular CLI with the Ivy compiler and also discuss upgrading the existing Bold Reports Angular library.
Create Bold Report Viewer in Angular 9
In this section, we will discuss creating an Angular application using Angular CLI and integrating Bold Reports Angular components in that application.
Install Angular CLI
We need to install the Angular CLI globally, which always supports major versions of the Angular framework. Here it’s Angular 9. Run the following command to install it.
npm install @angular/cli@latest -g
Create a new application
To create a new Angular application, run the following command in the command prompt. This will automatically install the required Angular 9 packages.
ng new project-name E.g : ng new reportviewerapp
Install and configure Bold Reports Angular components
In this section, we are going to install the Bold Reports Angular components along with their types package and configure them with the created Angular 9 application.
- Install the Bold Reports Angular package along with its types package using the following commands.
npm install @boldreports/angular-reporting-components@2.2.28 --save-dev npm install @boldreports/types@2.2.28 --save-dev
- Include the
jquery
andreports.all
typings in the TypeScript configuration file.
[tsconfig.app.json]
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "typeRoots": [ "node_modules/@types", "node_modules/@boldreports/types" ], "types": [ "jquery", "reports.all" ] }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ] }
- Since Report Viewer requires the global
jQuery
object to render our Bold reporting components, we need to import and assignjquery
to window object.
[src/polyfills.ts]
import * as jquery from 'jquery'; window['jQuery'] = jquery; window['$'] = jquery;
- Then import the
BoldReportViewerModule
from@boldreports/angular-reporting-components
along with the necessary Report Viewer scripts in the App Module file.
[src/app/app.module.ts]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BoldReportViewerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Render Bold Report Viewer
- To initialize and render the viewer component, use the following code snippet in your app component view.
[src/app/app.component.html]
<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [reportPath] = "reportPath" style="width: 100%;height: 950px"> </bold-reportviewer>
- Also, bind the serviceUrl and reportPath to the app component view by using the following code snippet.
[src/app/app.component.ts]
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public serviceUrl: string; public reportPath: string; constructor() { this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer'; this.reportPath = '~/Resources/docs/sales-order-detail.rdl'; } }
In this application, we have used our online service. You can also create your own by using one of the following Web API services:
Preview
To run the app, execute the following command and then browse to http://localhost:4200 to see the application.
npm start
The output will look like the following.

Production build
To deploy the application in production, execute the following command.
npm run build
Upgrade existing Bold Reports Angular library
If you are using an earlier version of the Bold Reports Angular package (< v2.2.28), then it is easy to upgrade to the latest version by following these steps.
- Update the Bold Reports Angular package to latest version by executing this command.
npm update @boldreports/angular-reporting-components
- If you import
BOLD_REPORTVIEWER_COMPONENTS
in the appNgModule
, then you need to do the following changes in your application.
[Existing library code snippet]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BOLD_REPORTVIEWER_COMPONENTS } from '@boldreports/angular-reporting-components/src/reportviewer.component'; @NgModule({ declarations: [ AppComponent, BOLD_REPORTVIEWER_COMPONENTS ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
[New library code snippet]
import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { AppComponent } from ‘./app.component’; import { BoldReportViewerModule } from ‘@boldreports/angular-reporting-components’; // Need to import the Report Viewer scripts manually from version 2.2.28 import ‘@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BoldReportViewerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- If you have
BOLD_REPORTDESIGNER_COMPONENTS
in the appNgModule
, then you need to do the following changes in your application.
[Existing library code snippet]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BOLD_REPORTDESIGNER_COMPONENTS } from '@boldreports/angular-reporting-components/src/reportdesigner.component'; @NgModule({ declarations: [ AppComponent, BOLD_REPORTDESIGNER_COMPONENTS ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
[New library code snippet]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components'; // Need to import the Report Designer scripts manually from version 2.2.28 import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BoldReportDesignerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- You need to do the following changes in your application if you import
BoldReportsAngularModule
in the appNgModule.
[Existing library code snippet]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BoldReportsAngularModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
[New library code snippet]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BoldReportsModule } from '@boldreports/angular-reporting-components'; // Need to import the Reports scripts manually from version 2.2.28 import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min'; import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BoldReportsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Now, we have upgraded our Bold Reports library to the latest version. To learn more about this breaking change, refer to our documentation.
Conclusion
I hope this blog provided you a clear overview of creating a Bold Report Viewer component using Angular CLI with the Ivy compiler and also how to upgrade your existing Bold Reports Angular application to latest version with minimal changes. To learn more about our Angular Reporting components , visit our help site.
Check out the new updates and let us know what you think on Twitter, Facebook, LinkedIn, or Instagram. If you have any questions, leave a comment below. To keep saving time on your reporting solutions, stay tuned to Bold Reports by Syncfusion.