Migrate to Report Designer v2.0 component

This section provides simple step-by-step instructions to update your existing Report Designer component to our latest v2.0 component.

This section explains migration steps to migrate Bold Report Designer version lesser than v5.2.xx to v5.2.xx and above.

Replacing CSS reference

1. Open the angular.json file.

2. Remove the Report Designer component older CSS references.

   • bold.reports.all.min.css
   • bold.reportdesigner.min.css

3. Add v2.0 CSS reference into the file.

   • \v2.0\tailwind-light\bold.report-designer.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",
         "version": 1,
         "newProjectRoot": "projects",
         "projects": {
           "reportdesignerapp": {
             "root": "",
             "sourceRoot": "src",
             "projectType": "application",
             "prefix": "app",
             "schematics": {},
             "architect": {
               "build": {
                 "builder": "@angular-devkit/build-angular:browser",
                 "options": {
                   "outputPath": "dist/reportdesignerapp",
                   "index": "src/index.html",
                   "main": "src/main.ts",
                   "polyfills": "src/polyfills.ts",
                   "tsConfig": "src/tsconfig.app.json",
                   "assets": [
                     "src/favicon.ico",
                     "src/assets"
                   ],
                   "styles": [
                     "src/styles.css",
                   "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css",
                   "./node_modules/codemirror/lib/codemirror.css",
                   "./node_modules/codemirror/addon/hint/show-hint.css"
                   ],
                   "scripts": [
                     "./node_modules/codemirror/lib/codemirror.js",
                     "./node_modules/codemirror/addon/hint/show-hint.js",
                     "./node_modules/codemirror/addon/hint/sql-hint.js",
                     "./node_modules/codemirror/mode/vb/vb.js"
                   ],
                   "es5BrowserSupport": true
                 },
             . . .
             . . .
             }

Replacing script references

1. Open the index.html file and remove the following script references.

   • ej2-base.min
   • ej2-data.min
   • ej2-pdf-export.min
   • ej2-svg-base.min
   • ej2-circulargauge.min
   • ej2-maps.min

2. Open the app.module.ts file.

3. Remove the Report Designer component older script references.

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

4. Add the following v2.0 script references to the page.

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

The final updated app.module.ts file appears like this.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
  import { AppComponent } from './app.component';

  //Report Designer component dependent scripts
  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 and Designer component scripts
  import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
  import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';

  @NgModule({
    declarations: [
      AppComponent
    ],
  imports: [
      BrowserModule,
      BoldReportViewerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }