Add Web Report Designer to an Angular application using Angular CLI

This section explains the steps required to add Web Report Designer to an Angular application with Bold Reports^® Angular package.

If you are using higher version of Angular CLI (>= v17.x), then refer Getting Started for Latest Version.

Prerequisites

Before getting started with Bold Report Designer, make sure your development environment includes the following,

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

Install the Angular CLI

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

To learn more about angular-cli commands refer here

Create a new application

To create a new Angular application run the below command in Command Prompt.

```typescript
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 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 Report Designer in Angular CLI

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/[email protected] —save-dev

Note: It is important to exercise caution during the package installation process to avoid potential complications with package compilation.

Install the typings dependencies reports.all, jquery, types/jquery and jsrender using below commands.

npm install @boldreports/types
npm install --save-dev jquery
npm install --save-dev @types/jquery
npm install --save-dev @types/jsrender

Add the typings jquery, jsrender, and reports.all to the tsconfig.app.json file.

{
  ...
  ...
  "compilerOptions": {
    ...
    ...
    "baseUrl": "",
    "types": [
      "jquery",
      "jsrender",
      "reports.all"
    ]
  },
  ...
  ...
}

The Report Viewer requires a window.jQuery object to render the component.

For Angular version 12 or higher, Refer the jQuery script file (jquery.js) as given in the angular.json file within the projectname > scripts section (For example, reportdesignerapp > scripts).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "reportdesignerapp": {
      "root": "src",
      "outDir": "dist",
      . . .
      . . .
      "styles": [
        "src/styles.css"
      ],
      "scripts": [
        "./node_modules/jquery/dist/jquery.js"
      ],
      . . .
      . . .
    }
  }
}

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 Report Designer component style (bold.report-designer.min.css) as given in the angular.json file within the projectname > styles section (For example, reportdesignerapp > styles).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "reportdesignerapp": {
      "root": "src",
      "outDir": "dist",
      . . .
      . . .
      "styles": [
        "src/styles.css",
        "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css"
      ],
      "scripts": [],
      . . .
      . . .
    }
  }
}

In the above 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.

Adding code mirror reference

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.

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",
  "projects": {
    "reportdesignerapp": {
      "root": "src",
      "outDir": "dist",
      . . .
      . . .
      "styles": [
        "src/styles.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/sql/sql.js",
        "./node_modules/codemirror/mode/vb/vb.js",
        "./node_modules/jquery/dist/jquery.js"
      ],
      . . .
      . . .
    }
  }
}

Adding Report Designer component

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.js';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min.js';

//Report Viewer and Designer component scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min.js';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min.js';

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

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 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"
        ],
        . . .
        . . .

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 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" />`

Create Web API service

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 service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports or you must create any one of the following Web API service.

Set Web API service URL

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>

Serve the application

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/