Create an Angular Application with a Document Viewer From Template

• Jun 14, 2022
• 3 minutes to read

This document describes how to use the DevExpress Template Gallery or .NET Core command line interface (CLI) to generate 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.

Use the DevExpress Template Gallery

The DevExpress Template Gallery implements a step-by-step process that allows you to create an ASP.NET Core application with a Document Viewer.

The created application includes a sample report storage that allows users to open report layout files (REPX) from the Reports folder and instances of report types predefined in the assembly.

Follow the steps below to create an ASP.NET Core application in Visual Studio:

1. Select FILE | New | Project in the main menu or press CTRL+SHIFT+N to create a new project.

   

2. Select the DevExpress v21.2 Web App Template Gallery, and click Next:

   

3. Specify a project name and location, and click Create:

   

4. Select Reporting Angular Application from the .NET Core category in the invoked DevExpress Template Gallery.

   

   Select a framework version and click Create Project.

5. Enable the Add Viewer Page checkbox in the invoked DevExpress ASP.NET MVC Project Wizard to add the Document Viewer to the web application (the report-viewer.html file). You can add a Web Document Viewer and a Report Designer to the application.

   

   Use the following Document Viewer settings:

   • Report Storage Name - the server-side report storage‘s class name.
   • Data Binding Mode - switches between the Expressions and Expressions (Advanced) modes that specify how data is fetched to reports and controls. See Data Binding Modes for more information.

   Click Create Project to apply these settings to the project.

6. (Optional) You can configure the Document Viewer to load a report when the application starts. Navigate to the ClientApp | src | app | report-viewer | report-viewer.ts file and replace the built-in report name with the name of your report:

   JS

   reportUrl: string = "TestReport";
   

7. Run the project to see the result:

   

Use the Console

Use the .NET Core command line interface (CLI) to create an ASP.NET Core Reporting application from the console:

1. Open the console and type the following command to install DevExpress CLI templates:

   dotnet new -i "DevExpress.DotNet.Web.ProjectTemplates"
   

2. Refer to the https://nuget.devexpress.com/#feed-url page and obtain the NuGet Feed URL. This URL includes your personal feed authorization key and is used to install NuGet packages for the Document Viewer.

3. Use the command below to create a new project with a Document Viewer.

   dotnet new dx.reporting.angular --nuget-feed https://nuget.devexpress.com/{auth_key}/api --name DocumentViewerApp --add-viewer true
   

   Specify the following command line parameters to customize the project:

   • -nf | –nuget-feed (required) - specifies your personal DevExpress NuGet Feed URL.
   • -f |–framework (optional) - the framework version. Use values netcoreapp2.1, netcoreapp3.1, or net5.0. The default value is netcoreapp3.1.
   • -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.

   See Create an Angular Application with a Report Designer From Template for information on other settings.

4. Navigate to the created application’s folder and download the client resources.

   cd DocumentViewerApp\ClientApp
   npm install
   

   Note

   For recent Angular versions (13 and later) you may have to set the skipLibCheck option to true in the tsconfig.json file to avoid compilation errors.

5. Restore dependencies, build the application, and get the application’s URL:

   cd ..
   dotnet restore
   dotnet run
   

6. 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.