ContextQMD
Back to Devexpress

Use DevExpress Visual Studio Templates to Create an Angular Reporting App with Document Viewer

xtrareports-400045-web-reporting-angular-reporting-document-viewer-create-an-aspnet-core-angular-application-with-a-document-viewer.md

latest3.6 KB
Original Source

Use DevExpress Visual Studio Templates to Create an Angular Reporting App with Document Viewer

  • Jan 21, 2025
  • 3 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 Document Viewer 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 ASP.NET Core application with a Document Viewer.

The created application includes a sample report storage that allows users to open report layout files (REPX) from the Reports folder and instances of report types predefined in the assembly.

Follow the steps below to create an ASP.NET Core 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. Enable the Add Viewer Page checkbox in the invoked DevExpress ASP.NET MVC Project Wizard to add the Document Viewer to the web application (the report-viewer.html file). You can add a Wesb Document Viewer and a Report Designer to the application.

  6. Optional. You can configure the Document Viewer to load a report when the application starts. Navigate to the ClientApp | src | app | report-viewer | report-viewer.ts file and replace the built-in report name with the name of your report:

  7. Run the project to see the result:

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 a Document Viewer, you can continue to extend your application with the following features:

Client-Side ConfigurationIntegrate the Document Viewer for Web into your Angular-based application.Specify Parameter ValuesSet parameter values in the Document ViewerCustomize Toolbar and Tab PanelCustomize available Document Viewer elements.