Create an Angular Front-End Application with a Report Designer
- 6 minutes to read
The Web Report Designer is used in applications that contain client and server parts:
- Client
- A Web Report Designer integrated in a client Angular application displays a report provided by the server-side model.
- Server
- The server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other back-end capabilities.
This tutorial creates and configures a client Angular application and a server ASP.NET Core backend. The client contains the Web Report Designer control.
Tip
You can also use our DevExpress project templates to create a Angular Reporting application:
#Prerequisites
- Node.js 18.13 or later
- .NET 8 SDK or later
- Visual Studio 2022 (v17.0) or higher
Note the following details about package versions:
- The script version on the client should match the library version on the server.
- DevExpress npm package versions should be identical.
#Server (Back-End) Application
#Use the DevExpress CLI Template
You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:
Install DevExpress ASP.NET Core project templates from nuget.org:
dotnet new install DevExpress.AspNetCore.ProjectTemplates
Create a back-end Reporting application:
consoledotnet new dx.aspnetcore.reporting.backend -n ServerApp
You can use the following parameters to see available command options:
-? | -h | --help
.Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.
Call the UseCors method and pass the policy name as a parameter. The
UseCors
method should be called after theUseRouting
method and before any MVC-related code. Place theUseCors
method before theUseMvc
orUseEndpoints
methods.Open the application startup file and insert the following code:
var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddPolicy("AllowCorsPolicy", builder => { // Allow all ports on local host. builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost"); builder.AllowAnyHeader(); builder.AllowAnyMethod(); }); }); var app = builder.Build(); app.UseRouting(); app.UseCors("AllowCorsPolicy"); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); }); app.Run();
To run the server-side application, run the following command:
consolecd ServerApp dotnet run
#Use Visual Studio Template
To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:
- Report Designer Server-Side Application (ASP.NET Core)
- Report Designer’s Server-Side Configuration (ASP.NET MVC)
#Client (Front-End) Application
Follow the steps below to create and configure an Angular client-side application:
Make sure you have the current Node.js version with npm installed on your machine.
consolenode -v npm -v
Open the console window and install the Angular CLI v17+ globally.
consolenpm install -g @angular/cli
When prompted for options, select default settings (press Enter).
Run the command to create a new Angular project:
consoleng new angular-report-designer
Refer to the Angular documentation for information on the Angular application structure.
Install the following packages:
- devextreme
- devextreme-angular
- (optional) devexpress-richedit
- @devexpress/analytics-core
- devexpress-reporting-angular
consolecd angular-report-designer npm install devextreme@24.2-stable devextreme-angular@24.2-stable devexpress-richedit@24.2-stable @devexpress/analytics-core@24.2-stable devexpress-reporting-angular@24.2-stable
Note
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 inline editor for the XRRichText control. If you do not need the Rich Text inline editor in your reports, do not install thedevexpress-richedit
package. This reduces the distribution package size.Replace the content of the src\app\app.component.ts file with the following code:
import { Component, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { DxReportDesignerModule } from 'devexpress-reporting-angular'; import 'devexpress-reporting/dx-richedit'; @Component({ selector: 'app-root', encapsulation: ViewEncapsulation.None, standalone: true, imports: [ CommonModule, RouterOutlet, DxReportDesignerModule], templateUrl: './app.component.html', styleUrls: [ "../../node_modules/ace-builds/css/ace.css", "../../node_modules/ace-builds/css/theme/dreamweaver.css", "../../node_modules/ace-builds/css/theme/ambiance.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'; // If you use the ASP.NET Core backend: getDesignerModelAction = "/DXXRD/GetDesignerModel" // If you use the ASP.NET MVC backend: //getDesignerModelAction = "/ReportDesigner/GetReportDesignerModel"; // The report name. reportName = "TestReport"; // The backend application URL. host = 'http://localhost:5000/'; }
Replace the src\app\app.component.html file content with the following code to add the dx-report-designer Angular component:
<div> <dx-report-designer [reportUrl]="reportName" height="700px" > <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="host"></dxrd-request-options> </dx-report-designer> </div>
#Run the Project
Run the server application.
Make sure to specify the correct server-side port (5000 in this example) and report name (TestReport in this example) in the src\app\app.component.ts file.
Run the client application:
cmdnpm start
Note
For recent Angular versions (16 and later) you may have to compile the Angular project with the
skip
option set toLib Check true
, and increase theinitial
budget setting in theangular.
file up to 5mb to avoid compilation errors.json Open the http://localhost:4200/ location in the browser to see the result.
#Troubleshooting
Note
For recent Angular versions (16 and later) you may have to compile the Angular project with the skip
option set to true
, and increase the initial
budget setting in the angular.
file up to 5mb to avoid compilation errors.
When you start the application, you may encounter the following problems:
#Page is blank
The Report Designer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Report Designer failed to load the report. Consult the developer for assistance. Use development mode for detailed information.
Check the following:
- The backend application is up and running.
- The specified controller action path matches the back-end application type. If you use the ASP.NET Core backend, specify the
/DXXRD/GetDesignerModel
path; if you use the ASP.NET MVC backend, specify the/ReportDesigner/GetReportDesignerModel
path. - The backend application runs on the port specified in the
host
setting of the Report Designer component. - The application’s URI satisfies the CORS policy specified in your back-end application.
- The
reportUrl
value matches an existing report. For the back-end application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template). - The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for library version mismatch on every request to the server. For details, review the following help document: Server-Side Libraries Version.
Refer to the following help topic for more information: Troubleshooting.