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.

Note

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",
        ...
      },
    

    Note

    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';
    
    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxReportViewerModule
    ],
    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>
    </dx-report-viewer>
    
  8. Replace the content of the angular-example\src\app\app.component.ts file with the following code:

    import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: [
        "../../node_modules/jquery-ui/themes/base/all.css",
        "../../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 = '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';
    }
    
    reportUrl
    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.
    invokeAction
    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.
    hostUrl
    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