This section explains the steps required to add Web Report Designer version higher than v5.2.xx
to an Angular application.
Before getting started with Bold Report Designer, make sure your development environment includes the following,
Angular provides the easiest way to set Angular CLI projects using Angular CLI tool. To install the CLI application globally to your machine, run the following command in Command Prompt.
npm install -g @angular/cli@latest
To learn more about
angular-cli
commands refer here
To create a new Angular application run the below command in Command Prompt.
ng new project-name
E.g : ng new reportdesignerapp
The
ng new
command prompts you for information about features to include in the initial app project. Add theAngular Routing
to your angular application by enteringy
in the prompt window then press Enter key. Now, choose theCSS
stylesheet format using the arrow keys and then press Enter key. The Angular CLI installs the required Angular npm packages and other dependencies.
Bold Reporting packages are distributed in npm as @boldreports/angular-reporting-components.
To configure the web Report Designer component, change the directory to your application’s root folder.
cd project-name
E.g : cd reportdesignerapp
Run the following commands to install the Bold Reports Angular library.
Angular version | NPM package installation |
---|---|
12 or greater than 12 | npm install @boldreports/angular-reporting-components@latest —save-dev |
lesser than 12 | npm install @boldreports/angular-reporting-components@5.1.27 —save-dev |
Note: It is important to exercise caution during the package installation process to avoid potential complications with package compilation.
Also, Install Bold Reports typings by executing the below command.
npm install --save-dev @boldreports/types
Register the @bold-reports/types
under the typeRoots
and add the typings jquery
and reports.all
to the tsconfig.app.json
file.
{
...
...
"compilerOptions": {
...
...
"typeRoots": [
"node_modules/@types",
"node_modules/@boldreports/types"
],
"types": [
"jquery",
"reports.all"
]
},
...
...
}
If you are using Angular CLI version 7.x.x, you will get an error like
Cannot find type definition file for 'reports.all'
. To resolve this error, you need to replace thenode_modules/@boldreports/types
line undertypeRoots
array intsconfig.app.json
with the following code
"./../node_modules/@boldreports/types"
Report Designer requires a window.jQuery
object to render the component.
For Angular version 12 or higher
, create a file src/globals.ts
and import the jQuery
as shown in the below code snippet.
import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;
In the src/app/app.module.ts
file, import the src/globals.ts
file prior to importing the Bold Reports
viewer or designer component in the app.module.ts
.
import './../globals';
For Angular version lesser than 12
, import jQuery
into the src/polyfills.ts
file as shown in the following code snippet.
import * as jquery from 'jquery';
let windowInstance = (window as { [key: string]: any });
windowInstance['jQuery'] = jquery;
windowInstance['$'] = jquery;
Open the angular.json
file from your application’s root directory.
Refer the web Report Designer component style scripts bold.report-designer.min.css
under the styles
node of projects
section as in the below code example.
If you are using Angular 6 or lower version project, add the changes in
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",
],
"scripts": [],
"es5BrowserSupport": true
},
. . .
. . .
}
In the above code snippet the
tailwind-light
theme is used. You can modify the theme based on your application, refer the following syntax:./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/[theme-name]/bold.report-designer.min.css
.
If you are using Angular CLI version 10.x.x, you will get a warning like
CommonJS or AMD dependencies can cause optimization bailouts
. To resolve this warning, you need to register the Bold Report JavaScript files underallowedCommonJsDependencies
array inangular.json
file.
. . .
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min",
"@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min"
],
. . .
. . .
Report Designer requires the code mirror scripts and styles to edit the SQL queries and Visual Basic code functions with syntax highlighter.
Run the below command, to install the code mirror dependencies.
npm install codemirror@5.45.0
Open the angular.json
file from your application’s root directory and Refer the code mirror script and styles under the scripts
and styles
node of projects
section as in the below code example.
{
"$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
},
. . .
. . .
}
To add the web Report Designer component refer the following steps:
Open the src/app/app.module.ts
file.
You can replace the following code snippet in the app.module.ts
file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components';
import { AppRoutingModule } from './app-routing.module';
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,
BoldReportDesignerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Open the src/app/app.component.html
file and initialize the web Report Designer.
You can replace the following code snippet in the app.component.html
file.
<bold-reportdesigner id="designer" style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>
Open the src/app/app.component.ts
and replace the below code example.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'reportdesignerapp';
public serviceUrl: string;
constructor() {
// Initialize the Report Designer properties here.
}
}
If you have faced the issue
'ej' is not defined
after the above configuration in Angular CLI latest version 7, Please refer the below code snippet in your application where you have rendered Bold Reporting Components(model file) to resolve the issue.
`/// <reference types="reports.all" />`
The web Report Designer requires a Web API service to process the data and file actions. You can skip this step and use our online Web API services to create, edit, and browse reports or you must create any one of the following Web API service.
To set Web API service, open the app.component.ts
file and add the code snippet as in the constructor
.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'reportdesignerapp';
public serviceUrl: string;
constructor() {
this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
}
}
Open the app.component.html
to set ServiceUrl
property of web Report Designer as in the following code snippet.
<bold-reportdesigner id="designer" [serviceUrl] = "serviceUrl" style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>
Go to the workspace folder (reportdesignerapp).
Launch the server by using the CLI command ng serve, with the —open option.
ng serve --open
The ng serve
command launches the server and the --open
option automatically opens your browser to http://localhost:4200/
import { Component } from '@angular/core';
@Component({
selector: 'ej-sample',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public serviceUrl: string;
constructor() {
this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportingAPI';
}
}
<bold-reportdesigner id="designer" [serviceUrl]="serviceUrl" >
</bold-reportdesigner>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BoldReportsModule } from '@boldreports/angular-reporting-components';
import { AppComponent } from './app.component';
// data-visualization
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';
//Reports
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
// code-mirror
import 'codemirror/lib/codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/vb/vb';
import * as CodeMirror from 'codemirror';
const codemirror = 'CodeMirror';
window[codemirror] = CodeMirror;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BoldReportsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Note: You can refer to our feature tour page for the Angular Report Designer to see its innovative features. Additionally, you can view our Angular Report Designer examples which demonstrate the rendering of SSRS RDLC and RDL reports.