ContextQMD
Back to Devexpress

Use DevExpress Visual Studio Templates to Create an Angular Reporting App with a Report Designer

xtrareports-400055-web-reporting-angular-reporting-report-designer-create-an-aspnet-core-angular-application-with-a-report-designer.md

latest3.2 KB
Original Source

Use DevExpress Visual Studio Templates to Create an Angular Reporting App with a Report Designer

  • Jan 21, 2025
  • 4 minutes to read

This document describes how to use the DevExpress Template Gallery to generate a Single-Page Application (SPA) with the following projects:

  • An ASP.NET Core project that works as an API backend
  • An Angular project that works as a frontend and contains the End-User Report Designer control.

Note

We implemented a new dotnet CLI-powered Project Wizard you can use across multiple IDEs. The new wizard suggests additional templates: Cross-IDE Project Template Kit.

The DevExpress Template Gallery implements a step-by-step process that allows you to create an Angular application with a Report Designer that relies on the ASP.NET Core backend application.

The created application implements the CustomReportStorageWebExtension class that saves the reports you change in the Report Designer to a file in the Reports folder. This sample storage is intended for demonstration purposes only. Do not use it in production. Create a ReportStorageWebExtension class descendant instead and implement logic to save reports.

Follow the steps below to create an application in Visual Studio:

  1. Select FILE | New | Project in the main menu or press CTRL+SHIFT+N to create a new project.

  2. Select the DevExpress v25.2 Web App Template Gallery , and click Next :

  3. Specify a project name and location, and click Create :

  4. Select Reporting Angular Application from the .NET category in the invoked DevExpress Template Gallery.

  5. Set Add Designer Page to true to add the Report Designer to the web application.

  6. Run the project. Visual Studio loads all packages and dependencies, and the project starts and displays the home page in the web browser. Click the Report Designer link on the navigation bar to display the Report Designer, as shown in the image below:

Troubleshooting

The following article lists common issues that can occur in a Web Reporting application and describes solutions: Troubleshooting

For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.

What’s Next

Now that you’ve created a basic Angular app with an End User Report Designer, you can continue to extend your application with the following features:

Client-Side ConfigurationIntegrate the Report Designer for Web into your Angular-based application.CustomizationCustomize available Document Viewer elements.