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
tov5.2.xx
and above.
Open the angular.json
file.
Remove the Report Designer component older CSS references.
bold.reports.all.min.css
bold.reportdesigner.min.css
Add v2.0 CSS reference into the file.
\v2.0\tailwind-light\bold.report-designer.min.css
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
},
. . .
. . .
}
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
Open the app.module.ts
file.
Remove the Report Designer component older script references.
bold.report-viewer.min
bold.report-designer.min
ej.bulletgraph.min
ej.chart.min
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 { }