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:
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:
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:
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.
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
Perform the following steps to run this example:
-
Open the back-end project solution (
ServerSideAspNetCoreReportingApp/ServerSideAspNetCoreReportingApp.sln) in Visual Studio and run the project. -
Navigate to the
ClientAppfolder that is the client part's root folder. -
Open the console and run the following command:
npm install -
Run the command to compile and start the client part:
ng serve -
Open your browser at
http://localhost:4200/to see the result.
The following articles help troubleshoot and resolve issues that may occur in web reporting applications:
Client App
Server App