Migrate to Report Viewer v2.0 component

This section provides simple step-by-step instructions to update your existing Report Viewer application to our latest modern v2.0 scripts, styles and components.

Replacing CSS reference

1. Open the angular.json file.
2. Remove the Report Viewer component old style
   • bold.reports.all.min.css
3. Added v2.0 style
   • \v2.0\tailwind-light\bold.report-viewer.min.css
4. The final updated angular.json file.

If you are using an Angular 6 or lower version project, add the changes to the angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "reportviewerapp"
  },
  "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": [],
       . . .
       . . .
      }

Replacing Report Viewer component

1. Open the app.module.ts file.

2. Remove the Report Viewer component old scripts

   • bold.report-viewer.min
   • ej.bulletgraph.min
   • ej.chart.min

3. Added v2.0 scripts

   • \v2.0\common\bold.reports.common.min
   • \v2.0\common\bold.reports.widgets.min
   • \v2.0\bold.report-viewer.min.css

4. The final updated app.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';
   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';
   
   import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
   imports: [
       BrowserModule,
       BoldReportViewerModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }