Create an Angular Front-End Application with a Report Designer

  • 4 minutes to read
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 Report Designer From Template.

You should create two projects: a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Server (Back-End) Application

Perform the steps described in one of the following topics to create a backend application:

Client (Front-End) Application

Perform the following steps to create and configure an Angular client-side application:

Create New Application

  1. Install Node.js and npm if they do not exist on your machine. Check whether the latest version of npm is installed.

  2. Open the command prompt and install the Angular CLI (command line interface tool) globally.

    npm install -g @angular/cli
    
  3. Select a folder to store all the files related to the client-side functionality. Navigate to that folder and run the following command:

    ng new angular-report-designer --defaults
    

    This command creates the angular-report-designer folder that contains a new Angular application. Refer to the Angular documentation for information on the application structure.

Install Libraries

  1. Determine the DevExpress library versions in the server (backend) application. If you use the ASP.NET Core backend application, open the application's package.json file and copy the following information for further reference in the next step:

    ...
    "dependencies": {
        ...
        "devextreme": "20.2.<MinorVersion>",
        "@devexpress/analytics-core": "20.2.<MinorVersion>",
        "devexpress-reporting": "20.2.<MinorVersion>",
        ...
    }
    ...
    

    Where <MinorVersion> is a number specific to your application.

  2. Open the package.json configuration file in the Angular application and add the following packages:

    ...
      "dependencies": {
        ...
        "devextreme": "20.2.<MinorVersion>",
        "devexpress-richedit": "20.2.<MinorVersion>",
        "@devexpress/analytics-core": "20.2.<MinorVersion>",
        "devexpress-reporting-angular": "20.2.<MinorVersion>"
      },
    ...
    

    Where <MinorVersion> is the version number in the backend application determined in the Step 1.

    The devexpress-richedit package enables the Rich Text Editor for the XRRichText control. If you do not need the Rich Text Editor in your reports, exclude devexpress-richedit from the configuration file to reduce the size of the distribution package.

  3. Change your current directory to the project root folder and install packages:

    cd angular-report-designer
    
    npm install
    

Create the Angular Component

  1. Replace the \src\app\app.module.ts file content with the following code:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { DxReportDesignerModule } from 'devexpress-reporting-angular';
    import { AppComponent } from './app.component';
    
    
    
    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxReportDesignerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    NOTE

    The order of import declarations is important.

  2. Replace the \src\app\app.component.html file content with the following code that uses the dx-report-designer Angular component:

    <div>
        <dx-report-designer [reportUrl]="reportName" height="700px" >
            <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="host"></dxrd-request-options>
        </dx-report-designer>
    </div>
    
  3. Replace the \src\app\app.component.ts file content with the following code:

    import { Component, ViewEncapsulation } from '@angular/core';
    import 'devexpress-reporting/dx-richedit';
    
    @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.common.css",
        "../../node_modules/devextreme/dist/css/dx.light.css",
        "../../node_modules/devexpress-richedit/dist/dx.richedit.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/analytics-core/dist/css/dx-querybuilder.css",
        "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
        "../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
    ]
    })
    
    export class AppComponent {
    title = 'DXReportDesignerSample';
    getDesignerModelAction = "/ReportDesigner/GetReportDesignerModel";
    // The report name.
    reportName = "TestReport";
    // The backend application URL.
    host = 'https://localhost:44389/';
    }
    

Specify the Backend Host URL

Run the server (backend) application. Find the name of the available report and the backend application URL. Change the reportName and host setting in the app.component.ts file, if necessary. Review the following help topic section for more information: Determine the Host URL.

Run the Application

Switch to the client root folder (angular-report-designer) and run the command to launch the server and rebuild the application:

ng serve

Open your browser at http://localhost:4200/ to see the result.

Troubleshooting (ASP.NET Core backend)

If the page does not display the Report Designer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

  • The backend application runs on the port specified in the host setting of the Report Designer component in your Angular project. Review the following help topic for more information: Determine the Host URL.
  • The Angular application's URI satisfies the CORS policy specified in your backend application. Review the following help topic for more information: Configure the Application.
  • The Angular component's reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry.