Skip to main content

Create an Angular Front-End Application with a Document Viewer

  • 4 minutes to read

This document describes how to create a Reporting application with the Angular client part.


You can use the DevExpress Angular SPA template to create an Angular Reporting application. For more information, refer to the following help topic: Create an Angular Application with a Document Viewer From Template.

The project consists of the server and client parts.

Server (Back-End) Application

Review the following topics to create a back-end application:

Client (Front-End) Application

Perform the following steps to create and configure the client part:

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

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

    npm install -g @angular/cli

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

  3. Create a new folder to store client files. Navigate to the created folder and run the command to create a new project:

    ng new angular-example --strict=false

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

  4. Open the package.json configuration file in the application root folder. Add the following packages:

      "dependencies": {
        "devextreme": "21.2.*",
        "@devexpress/analytics-core": "21.2.*",
        "devexpress-reporting-angular": "21.2.*",
        "bootstrap": "^4.3.1",
        "core-js": "^3.4.3",


    Front-end and back-end applications should use the same version of DevExpress controls.

  5. Navigate to the project root folder and install the packages:

    cd angular-example
    npm install

    Installed libraries are copied to the node_modules folder.

  6. Replace the content of the angular-example\src\app\app.module.ts file with the following code:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { DxReportViewerModule } from 'devexpress-reporting-angular';
    declarations: [
    imports: [
    providers: [],
    bootstrap: [AppComponent]
    export class AppModule { }
  7. Replace the content of the angular-example\src\app\app.component.html file with the following code that inserts the dx-report-viewer Angular component:

    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
  8. Replace the content of the angular-example\src\app\app.component.ts file with the following code:

    import { Component, ViewEncapsulation } from '@angular/core';
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: [
    export class AppComponent {
    title = 'DXReportViewerSample';
    reportUrl: string = 'Products';
    hostUrl: string = 'https://localhost:54114/';
    // 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';
    A string that identifies a report. This string is passed to the server-side report name resolution services. You can create the ReportStorageWebExtension or IReportProvider descendant, and register it in your back-end application as a custom report name resolution service. For more information, review the following help topic: Open a Report in ASP.NET Core Application.
    Specifies a route to the controller that handles requests in your back-end application. A controller with the DXXRDV route is an internal MVC controller that is added to the back-end application when the methods AddDevExpressControls and UseDevExpressControls are called in the Startup.cs file. You can implement a WebDocumentViewerController descendant and register it as a controller with a custom route. For the code sample, review the following help topic: ASP.NET Core Reporting Best Practices.
    The back-end application’s URL.

    For more information on component options, review the following help topic: Document Viewer Client-Side Configuration in Angular Application.

  9. Run the server-side project.

  10. Use the command below to build and serve the application. You should run this command each time you make changes to the source files:

    ng serve
  11. Open the http://localhost:4200/ location in the browser to see the test report.

See Also