# JSViewer Angular(Core)

This topic shows the use of the ActiveReports JSViewer with an Angular 8 app and ASP.NET Core back-end.

## Content

The JSViewer\_Angular(Core) sample demonstrates the use of the ActiveReports JSViewer with an Angular 8 app and ASP.NET Core back-end.
![Screenshot 2025-06-13 130847](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/Screenshot%202025-06-13%20130847.065c80.png)

### Sample Location

[https://github.com/activereports/WebSamples20/tree/main/JSViewer_Angular_Core](https://github.com/activereports/WebSamples19/tree/main/JSViewer_Angular_Core)

### Details

When you run the sample, the default page appears in your browser. This page provides links to reports that demonstrate the use of the ActiveReports JSViewer with an Angular 7 app and ASP.NET Core back-end.
Clicking the report link in the left panel opens the report for preview. You can preview the following reports.

* AnnualReport.rdlx
* Invoice.rdlx
* Invoice.rpx
* InvoiceList.rdlx
* Invoice\_Colored.rpx
* Project&ResourceAnalysis
* Statistical analysis scatter plot.rdlx - Staff Performance Analysis.rdlx
* User defined report columns.rdlx

>type=note
> **Note**: The timeout error sometimes appears on running the JSViewer\_Angular(Core) sample with default settings. In this case, you should increase the connection timeout period. See [Troubleshooting](/activereportsnet/docs/v20.1/ar-troubleshooting) for details on how to resolve this issue.

The project consists of the following elements.

* ClientApp folder: This folder contains a standard Angular CLI app that is used for all UI concerns.
* Controllers folder: This folder contains the **ReportsController** files. The **ReportsController** handles the interaction with reports when a report is selected in the left panel.
* appsettings.json: The json configuration file.
* readme: This file contains the instructions on how to run the sample project.
* Startup.cs: This is the default startup file.
* Web.config: This configuration file contains the httpHandlers that allow ActiveReports to process reports on the Web. Note that you need to manually update version information here when you update your version of ActiveReports.

>type=warning
> Before publishing the sample, you must do the following.
>
> * In the **JSViewer\_Angular(Core).csproj** file, set the **PublishToIIS** property to true as follows:
>     `<PublishToIIS>true</PublishToIIS>`
> * Copy the sample **ViewerApp** folder to the **publish** folder.