Use .NET CLI Template to Create a Reporting Angular App with Document Viewer
- 2 minutes to read
You can use the .NET Core command-line interface (CLI) tools to create a Single-Page Application (SPA) with an ASP.NET Core project that works as an API backend and an Angular CLI project that works as a UI and contains the Document Viewer control.
Prerequisites
You need a configured private DevExpress NuGet source to create an application using the .NET Core 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::23.1.10
The console displays the list of templates installed on your machine from this package.
Create an Angular Reporting Application
Run the following command to create a new DocumentViewerApp project with a Document Viewer.
dotnet new dx.reporting.angular --name DocumentViewerApp --add-viewer true
The following command line parameters are available:
-f |--framework(optional)- Specifies the target framework for the project:
-net6.0- The target framework is .NET 6 (default)
-net7.0- The target framework is .NET -av | --add-viewer- Specifies whether to create a web page with a Document Viewer. The default value is
true. -ul | --use-logger(optional)- Specifies whether to log the Report Designer‘s server-side errors and events. The default value is
false.
Navigate to the application folder and download the client resources.
cd DocumentViewerApp\ClientApp
npm install
Note
For recent Angular versions (13 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.
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.
