Create an Angular Front-End Application with a Report Designer

• Dec 04, 2024
• 6 minutes to read

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

Note

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

View Example: How to Integrate Web Report Designer in Angular App

Server (Back-End) Application

Use DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. To do this, follow the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

   .NET CLI

   dotnet new install DevExpress.AspNetCore.ProjectTemplates
   

2. Create a back-end Reporting application:

   dotnet new dx.aspnetcore.reporting.backend -n ServerApp
   

   You can use the following parameters to see available command options: -? | -h | --help.

3. 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 the UseRouting method and before any MVC-related code. Place the UseCors method before the UseMvc or UseEndpoints methods.

   Open the application startup file and insert the following code:

   Program.cs

   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();
   

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in the 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

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 v16+ (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
   

   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. Change your current directory to the project root folder and install the following packages:

   • devextreme
   • devextreme-angular
   • (optional) devexpress-richedit
   • @devexpress/analytics-core
   • devexpress-reporting-angular

   cd 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 the devexpress-richedit package. This reduces the distribution package size.

Create the Angular Component

1. Replace the content of the angular-example\src\app\app.component.ts file with the following code:

   app.component.ts

   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 = 'https://localhost:58236/';
   }
   

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>
   

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:

npm start

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

Troubleshooting

Note

For recent Angular versions (16 and later) you may have to compile the Angular project with the skipLibCheck option set to true, and increase the initial budget setting in the angular.json 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. If the page does not display the Report Designer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

• 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 is up and running.
• 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).
• The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.