Use .NET CLI Template to Create a Reporting Angular App with Report Designer
- 4 minutes to read
You can use the .NET command-line interface (CLI) tools to create a Single-Page Application (SPA) with an ASP.NET Core project that works as an API backend. The Angular client app contains the End-User Report Designer control.
Prerequisites
You need a configured private DevExpress NuGet source to create an application using the .NET CLI Tools.
If you have already configured a private DevExpress NuGet source, proceed to step 1. Otherwise, add a private DevExpress NuGet source as described in the following help topic: Manage Packages with .NET CLI.
Step 1. Install DevExpress CLI Templates
Open the console and enter the following command:
dotnet new install DevExpress.DotNet.Web.ProjectTemplates::24.1.7
The console displays the list of templates installed on your machine from this package.
Step 2. Create an Angular Reporting Application
Use the command below to create a new designerapp project with a Report Designer.
dotnet new dx.reporting.angular --name designerapp --add-designer true --add-data-source true
The following command line parameters are available:
-nf, --nuget-feed <nuget-feed>
- Specifies the NuGet Feed URL. Refer to https://nuget.devexpress.com/#feed-url and login to your account to obtain your Feed URL.
-ad, --add-designer
- Specifies whether to create a web page with the Report Designer. The default value is
true
. -av, --add-viewer
- Specifies whether to create a web page with a Document Viewer. The default value is
true
. -ads, --add-data-source
- Specifies whether to create a sample connection string and register it in the Report Designer to create SQL Data Sources in the Report Wizard and Data Source Wizard. The connection string is also used to register a predefined data source. The default value is
true
. -ajs, --add-json-data-connection-storage
- Specifies whether to create a storage and register it to create JSON Data Sources in the Report Wizard and Data Source Wizard. For the storage to work correctly, ensure that the Newtosoft.Json package is installed. The default value is
false
. -ao, --add-data-object
- Specifies whether to add a sample data object to an application and register this data object to create Object Data Sources in the Report Wizard and Data Source Wizard. The default value is
false
. -rte, --enable-rich-text-editor
- Specifies whether to add an in-line Rich Text Editor for the RichText control. The default value is
false
. -dfb, --Dockerfile <None|Debian|...>
Creates a Dockerfile based on the selected OS. Review the following online example for more information: How to Use the DevExpress CrossPlatform Drawing Engine in an ASP.NET Core Application. Select
None
to not enable Docker support.- None (defaut)
- Skip docker support.
- Debian
- Debian-based Dockerfile.
- Alpine
- Alpine-based Dockerfile.
- Ubuntu
- Ubuntu-based Dockerfile.
- openSUSE
- openSUSE-based Dockerfile.
- Amazon Linux
- Amazon Linux based Dockerfile.
-f, --framework <net6.0|net7.0|...>
- Specifies the target framework for the project.
- net6.0 (default)
- The target framework is .Net6.0
- net7.0
- The target framework is .Net7.0
- net8.0
- The target framework is .Net8.0
-D, --DocumentStorage <InMemory|XPO|...>
- Specifies the storage type to cache documents that the report creates. For more information, review the following help topic: Web Document Viewer Cache Management.
- InMemory (default)
- Default cache that stores objects directly in memory without serialization, optimized for frequent operations.
- XPO
- Implements database cache based on the XPO library, designed for multi-instance applications to prevent cache data loss.
- File
- Configures the reporting engine to store documents generated by reports on disk instead of in memory.
- DistributedCache
- Enables cache as external service that uses ASP.NET Core distributed caching mechanism and can be shared by multiple application servers.
- Azure
- Configures the application to use Azure caching services.
Navigate to the application folder and download the client resources.
cd designerapp\ClientApp
npm install
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.
Step 3. Run the Project
Restore dependencies, build the application, and get the application’s URL:
cd ..
dotnet restore
dotnet run
The command output contains the application URL, which can be different on different hosts:
Now listening on: http://localhost:3083
Open your browser and navigate to the URL to see the result.