Angular 9 Reporting Components

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.

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

2. Include the jquery and reports.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"
  ]
}

3. Since Report Viewer requires the global jQuery object to render our Bold reporting components, we need to import and assign jquery to window object.

[src/polyfills.ts]

import * as jquery from 'jquery';
window['jQuery'] = jquery;
window['$'] = jquery;

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

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

6. 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:

• ASP.NET Web API Service
• ASP.NET Core Web API Service

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.

1. Update the Bold Reports Angular package to latest version by executing this command.

npm update @boldreports/angular-reporting-components

2. If you import BOLD_REPORTVIEWER_COMPONENTS in the app NgModule, 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 { }

3. If you have BOLD_REPORTDESIGNER_COMPONENTS in the app NgModule, 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 { }

4. You need to do the following changes in your application if you import BoldReportsAngularModule in the app NgModule.

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