Create an Angular Front-End Application with a Document Viewer
- 6 minutes to read
The Web Document Viewer is used in applications that contain client and server parts:
- Client
- A Web Document Viewer 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 Document Viewer control.
Tip
You can also use our DevExpress project templates to create an 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 for a Document Viewer:
consoledotnet new dx.aspnetcore.reporting.backend -n ServerApp --add-designer false
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:
- Document Viewer Server-Side Application (ASP.NET Core)
- Document Viewer’s Server-Side Configuration (ASP.NET MVC)
#Client (Front-End) Application
Follow the steps below to create and configure the client part:
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-document-viewer
Refer to the Angular documentation for information on the Angular application structure.
Install the following packages:
consolecd angular-document-viewer npm install devextreme@24.2-stable devextreme-angular@24.2-stable @devexpress/analytics-core@24.2-stable devexpress-reporting-angular@24.2-stable
Note
Front-end and back-end applications should use the same version of DevExpress controls.
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 { DxReportViewerModule } from 'devexpress-reporting-angular'; @Component({ selector: 'app-root', encapsulation: ViewEncapsulation.None, standalone: true, imports: [ CommonModule, RouterOutlet, DxReportViewerModule ], templateUrl: './app.component.html', styleUrls: [ "../../node_modules/devextreme/dist/css/dx.light.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-reporting/dist/css/dx-webdocumentviewer.css" ] }) export class AppComponent { title = 'DXReportViewerSample'; reportUrl: string = 'TestReport'; hostUrl: string = 'http://localhost:5000/'; // Use this line if you use an ASP.NET MVC backend //invokeAction: string = "/WebDocumentViewer/Invoke"; // Use this line if you use an ASP.NET Core backend invokeAction: string = '/DXXRDV'; }
For more information on component options, review the following help topic: Document Viewer Client-Side Configuration in an Angular Application.
Replace the content of the src\app\app.component.html file with the following code to add dx-report-viewer Angular component:
<dx-report-viewer [reportUrl]="reportUrl" height="800px"> <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options> </dx-report-viewer>
#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
When you start the application, you may encounter the following problems:
#Page is blank
The Document Viewer page is blank. The following error message is displayed at the bottom of the page:
Could not open report ‘TestReport’
Check the following:
- The backend application is up and running.
- The backend application runs on the port specified in the
host
setting of the Document Viewer component. - The application’s URI is compliant with the CORS policy specified in your back-end application.
- The
reportUrl
setting value matches an existing report. For the backend 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 a library version mismatch on every request to the server. For details, review the following help topic: Server-Side Libraries Version.
Refer to the following topic for more information: 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 Configuration
- Integrate the Document Viewer for Web into your Angular-based application.
- Specify Parameter Values
- Set parameter values in the Document Viewer
- Customize Toolbar and Tab Panel
- Customize available Document Viewer elements.