Create an Angular Front-End Application with a Document Viewer

  • 3 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

    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": {
        "devexpress-reporting-angular": "20.2.*",
        "@devexpress/analytics-core": "20.2.*",
        "core-js": "^3.4.3",
        "devexpress-reporting": "20.2.*",
        "devextreme": "20.2.*",

    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';
    // The report's path. The Document Viewer opens it when the application starts.
    reportUrl: string = 'Products';
    // Backend's project URI.
    hostUrl: string = 'http://localhost:54114/';
    // Use this line if you use an ASP.NET MVC backend
    invokeAction: string = "/WebDocumentViewer/Invoke";
    // Uncomment this line if you use an ASP.NET Core backend
    // invokeAction: string = 'DXXRDV';
  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 browser to see the test report.