Add Classic Web Report Designer to an Angular application using Angular CLI

To add the classic Bold Reports^® Web Report Designer to an Angular application, create an Angular CLI project, install the @boldreports/angular-reporting-components package, add the CSS and code mirror references, and then add the Report Designer component.

Use this getting started section to embed the Bold Reports^® Designer version less than v5.2.xx.

To get started quickly with the classic Report Designer, watch the following video:

If you are using lower version of Bold Reports^® Angular (< v2.2.28), see Getting Started for earlier version.

What do I need before adding the classic Report Designer to an Angular app?

To add the classic Bold Reports^® Report Designer to an Angular app, your development environment needs Node JS and NPM at the versions listed below.

Before getting started with the classic Bold Reports^® Report Designer, make sure your development environment includes the following:

Node JS (version 8.x or 10.x)
NPM (v3.x.x or higher)

Install the Angular CLI

To install the Angular CLI globally on your machine for the classic Report Designer application, run the following command in Command Prompt. The Angular CLI provides the easiest way to set up Angular projects.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, see the Angular CLI repository on GitHub.

Create a new application

To create a new Angular application, run the following 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 application project. Add the Angular Routing to your angular application by entering y in the prompt window then press Enter key. Now, choose the CSS stylesheet format using the arrow keys and then press Enter key. The Angular CLI installs the required Angular npm packages and other dependencies.

Configure Bold Reports^® Report Designer in Angular CLI

The Bold Reporting packages are distributed in npm as @boldreports/angular-reporting-components.

To configure the classic 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/[email protected] —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 running the following 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 the node_modules/@boldreports/types line under typeRoots array in tsconfig.app.json with the following code
```
"./../node_modules/@boldreports/types"
```
The classic Report Designer requires a window.jQuery object to render the component.
- For Angular version 12 or higher, create a src/globals.ts file and import jQuery with the following 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;
```

Adding CSS reference

Open the angular.json file from your application’s root directory.

Add the classic web Report Designer style sheets bold.reports.all.min.css and bold.reportdesigner.min.css under the styles node of the projects section, as in the following code example:

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

Css script reference

{
  "$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/material/bold.reports.all.min.css",
           "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
      . . .
      . . .
      }

In the preceding code snippet, the material theme is used. You can modify the theme based on your application, refer the following syntax: ./node_modules/@boldreports/javascript-reporting-controls/Content/[theme-name]/bold.reports.all.min.css and ./node_modules/@boldreports/javascript-reporting-controls/Content/[theme-name]/bold.reportdesigner.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 Reports^® JavaScript files under allowedCommonJsDependencies array in angular.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",
              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min",
              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min"
            ],
            . . .
            . . .

Adding code mirror reference

The classic Bold Reports^® Report Designer requires the code mirror scripts and styles to edit the SQL queries and Visual Basic code functions with a syntax highlighter.

Run the following 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 add the code mirror scripts and styles under the scripts and styles nodes of the projects section, as in the following code example:

Css script reference

{
  "$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/material/bold.reports.all.min.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.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
          },
      . . .
      . . .
      }

Adding Report Designer component

To add the classic Bold Reports^® Report Designer component, use 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 viewer
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
// Report Designer
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';

// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';

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

Open the index.html file and refer the following scripts in <head> tag.

<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

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 file and replace its content with the following 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 get the error 'ej' is not defined after this configuration in Angular CLI version 7, add the following code snippet to the file where you render the Bold Reports^® components (model file) to resolve the issue.

`/// <reference types="reports.all" />`

Create Web API service

The classic Bold Reports^® Report Designer requires a Web API service to process the data and file actions. You can skip this step and use the online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports. Otherwise, create one of the following Web API services.

Set Web API service URL

To set the Web API service URL for the classic Report Designer, open the app.component.ts file and add the following code snippet 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 the ServiceUrl property of the classic Report Designer as in the following code snippet:

<bold-reportdesigner id="designer" [serviceUrl] = "serviceUrl" style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>

Serve the application

To serve the classic Report Designer application, run the ng serve command from the workspace folder.

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/.
Click view option to view the demo.

app.component.ts

app.component.html

app.module.ts

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.