Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.

View Example

#Prerequisites

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:

    dotnet new install DevExpress.AspNetCore.ProjectTemplates
    
  2. Create a back-end Reporting application for a Document Viewer:

    console
    dotnet new dx.aspnetcore.reporting.backend -n ServerApp --add-designer false
    

    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:

    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();
    
  4. To run the server-side application, run the following command:

    console
    cd 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:

#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.

    console
    node -v
    npm -v
    
  2. Open the console window and install the Angular CLI v17+ globally.

    console
    npm install -g @angular/cli
    

    When prompted for options, select default settings (press Enter).

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

    console
    ng new angular-document-viewer
    

    Refer to the Angular documentation for information on the Angular application structure.

  4. Install the following packages:

    console
    cd 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.

  5. 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.

  6. 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

  1. 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.

  2. Run the client application:

    cmd
    npm start
    

    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.

  3. Open the http://localhost:4200/ location in the browser to see the result.

    Web Document Viewer Page

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