Create an Angular Front-End Application with a Document Viewer

• Jul 01, 2024
• 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: Use Visual Studio Templates to Create an Angular Application with a Document Viewer.

The project consists of the server and client parts.

View Example: How to Integrate Web Document Viewer in Angular App

Server (Back-End) Application

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

• Document Viewer’s Server-Side Configuration (ASP.NET MVC)
• Document Viewer Server-Side Application (ASP.NET Core)

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 v16+ 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-document-viewer
   

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

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

   • devextreme
   • devextreme-angular
   • @devexpress/analytics-core
   • devexpress-reporting-angular

   cd angular-document-viewer
   npm install devextreme@24.1-stable devextreme-angular@24.1-stable @devexpress/analytics-core@24.1-stable devexpress-reporting-angular@24.1-stable
   

   Note

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

5. Replace the content of the angular-document-viewer\src\app\app.component.ts file with the following code:

   app.component.ts

   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 = 'https://localhost:5001/';
   // 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 angular-document-viewer\src\app\app.component.html file with the following code that inserts the dx-report-viewer Angular component:

   app.component.html

   <dx-report-viewer [reportUrl]="reportUrl" height="800px">
   <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
   </dx-report-viewer>
   

7. Run the server-side project.

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

   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.

9. Open the http://localhost:4200/ location in the browser to see the test report.

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: The page is blank because the Document Viewer failed to load the report. Consult the developer for assistance. Use development mode for detailed information. If the page does not display the Document Viewer, press F12 to invoke DevTools and inspect the console messages.

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 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 (if backend application originated from the DevExpress template).
• The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help 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.