franks1/reporting-web-report-designer-angular-dxt-template

Sample project with the Web Report Designer created from the DevExtreme Angular template.

How to Integrate Web Report Designer in Angular App

This project consists of an Angular client (front-end) application and an ASP.NET Core server (back-end) application.

The ClientApp folder contains the Angular app created from the DevExtreme template as described in the following help topics:

• Create a DevExtreme Application
• Create an Angular Front-End Application with a Report Designer

The dx.material.orange.light theme is applied to the Report Designer component as described in the following help topic: Themes and Styles in Angular Application.

The ServerSideAspNetCoreReportingApp folder contains the ASP.NET Core server (back-end) application created as described in the following help topic: Report Designer Server-Side Configuration (ASP.NET Core). The application enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.

The angular-report-designer contains the sample Angular application created by following the steps in the Client (Front-End) Application help topic section.

When you start the back-end application and run the Angular application in the ClientApp folder, it appears as follows:

How to Run the Project

To run the project, start the ServerSideAspNetCoreReportingApp application, install npm packages with npm install command in the ClientApp folder, and run the command ng serve.

Before you run the project, verify the DevExpress version. If necessary, upgrade it to the DevExpress version you're currently using. Make sure to use the same version of DevExpress components for both Front-end and Back-end applications.

Follow these steps to update the project:

Upgrade the server-side app

Use the DevExpress Project Converter to upgrade assembly references for the back-end project solution. You can open the project in Visual Studio and navigate to the Menu: Extensions -> DevExpress -> Project Converter. Select the required version and upgrade the project.

Upgrade the client-side app

Navigate to the package.json file in the ClientApp folder and change all DevExpress script versions to the version you're using on the server side. If you're using v22.1.6, modify the package.json file as follows:

    {
        ...
        "devextreme": "22.1.6",
        "devexpress-richedit": "22.1.6",
        "@devexpress/analytics-core": "22.1.6",
        "devexpress-reporting-angular": "22.1.6"
        ...
    }

Open the ClientApp folder in the console and run the command to download updated packages:

npm install

Run the Example

Perform the following steps to run this example:

1. Open the back-end project solution (ServerSideAspNetCoreReportingApp/ServerSideAspNetCoreReportingApp.sln) in Visual Studio and run the project.

2. Navigate to the ClientApp folder that is the client part's root folder.

3. Open the console and run the following command:

   npm install

4. Run the command to compile and start the client part:

   ng serve

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

Troubleshooting

The following articles help troubleshoot and resolve issues that may occur in web reporting applications:

• Troubleshooting
• Reporting Application Diagnostics

Files to Review

Client App

• package.json
• app.module.ts
• report-designer.component.html
• report-designer.component.ts

Server App

• Startup.cs
• ReportingControllers.cs

More Examples

• How to use the Web Document Viewer in JavaScript with Angular