Create an Angular Front-End Application with a Report Designer

• Apr 10, 2023
• 4 minutes to read

Note

You can use the DevExpress Angular SPA template to create an Angular Reporting application. For more information, refer to the following help topic: Create an Angular Application with a Report Designer From Template.

You should create two projects: a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Server (Back-End) Application

Perform the steps described in one of the following topics to create a backend application:

• Report Designer Server-Side Configuration (ASP.NET MVC)
• Report Designer Server-Side Configuration (ASP.NET Core)

Client (Front-End) Application

Perform the following steps to create and configure an Angular client-side application:

Create New Application

1. Install Node.js and npm if they do not exist on your machine. Check whether the latest version of npm is installed.

2. Open the command prompt and install the Angular CLI (command line interface tool) globally.

   npm install -g @angular/cli
   

3. Select a folder to store all the files related to the client-side functionality. Navigate to that folder and run the following command:

   ng new angular-report-designer --strict=false
   

   This command creates the angular-report-designer folder that contains a new Angular application. Refer to the Angular documentation for information on the application structure.

Install Libraries

1. Open the package.json configuration file in the Angular application and add the following packages:

   package.json

   ...
     "dependencies": {
       ...
       "devextreme": "20.2.13",
       "devexpress-richedit": "20.2.13",
       "@devexpress/analytics-core": "20.2.13",
       "devexpress-reporting-angular": "20.2.13"
     },
   ...
   

   Important

   Version numbers should be the same and match the version number of DevExpress libraries in the backend application.

   The devexpress-richedit package enables the Rich Text Editor for the XRRichText control. If you do not need the Rich Text Editor in your reports, exclude devexpress-richedit from the configuration file to reduce the size of the distribution package.

2. Change your current directory to the project root folder and install packages:

   cd angular-report-designer
   
   npm install
   

Create the Angular Component

1. Replace the \src\app\app.module.ts file content with the following code:

   app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { DxReportDesignerModule } from 'devexpress-reporting-angular';
   import { AppComponent } from './app.component';
   
   
   
   @NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       DxReportDesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   Note

   The order of import declarations is important.

2. Replace the \src\app\app.component.html file content with the following code that uses the dx-report-designer Angular component:

   HTML

   <div>
       <dx-report-designer [reportUrl]="reportName" height="700px" >
           <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="host"></dxrd-request-options>
       </dx-report-designer>
   </div>
   

3. Replace the \src\app\app.component.ts file content with the following code:

   app.component.ts

   import { Component, ViewEncapsulation } from '@angular/core';
   import 'devexpress-reporting/dx-richedit';
   
   @Component({
   selector: 'app-root',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './app.component.html',
   styleUrls: [
       "../../node_modules/jquery-ui/themes/base/all.css",
       "../../node_modules/devextreme/dist/css/dx.common.css",
       "../../node_modules/devextreme/dist/css/dx.light.css",
       "../../node_modules/devexpress-richedit/dist/dx.richedit.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
       "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
       "../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
   ]
   })
   
   export class AppComponent {
   title = 'DXReportDesignerSample';
   getDesignerModelAction = "/ReportDesigner/GetReportDesignerModel";
   // The report name.
   reportName = "TestReport";
   // The backend application URL.
   host = 'https://localhost:44389/';
   }
   

Specify the Backend Host URL

Run the server (backend) application. Make sure that the reportName setting in the app.component.ts file matches the .repx file in the Reports folder of the backend application. Determine the backend application URL and change the host setting in the app.component.ts file, if necessary. Review the following help topic section for more information: Determine the Host URL.

Run the Application

Switch to the client root folder (angular-report-designer) and run the command to launch the server and rebuild the application:

ng serve

Open your browser at http://localhost:4200/ to see the result.

Troubleshooting (ASP.NET Core backend)

If the page does not display the Report Designer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

• The backend application runs on the port specified in the host setting of the Report Designer component in your Angular project. Review the following help topic for more information: Determine the Host URL.
• The Angular application’s URI satisfies the CORS policy specified in your backend application. Review the following help topic for more information: Configure the Application.
• The Angular component’s reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry (if backend application originated from the DevExpress template).