Create an Angular Front-End Application with a Document Viewer

• Jan 11, 2026
• 5 minutes to read

The Web Document Viewer is used in applications that contain client and server parts:

ClientA Web Document Viewer integrated in a client Angular application displays a report provided by the server-side model.ServerThe 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.

View Example

Tip

You can also use our DevExpress project templates to create an Angular Reporting application:

• Use DevExpress Visual Studio Templates to Create an Angular Reporting App with Document Viewer
• Use DevExpress .NET CLI Templates to Create an Angular Reporting App with Document Viewer

Prerequisites

• Node.js 18.13 or later

• .NET 8 SDK or later

• Visual Studio 2022 (v17.0) or higher

• Angular CLI v19+ 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:

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

2. Create a back-end Reporting application for a Document Viewer:

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.

4. To run the server-side application, run the following command:

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:

1. Make sure you have the current Node.js version with npm installed on your machine.

2. Open the console window and install the Angular CLI v19+ globally.

3. Run the command to create a new Angular project:

4. Install the following packages:

5. Replace the content of the src\app\app.ts file with the following code:

6. Replace the content of the src\app\app.html file with the following code to add dx-report-viewer Angular component:

Run the Project

1. Run the server application.

2. Run the client application:

3. 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 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. See Also

Open a Report in ASP.NET Core Application

Reporting Application Diagnostics