Steps to Create an Angular Report

[Chris]

I am completely new to Telerik and am trying the Telerik Reporting module. I have read the documentation several times but am still confused as to how to proceed.

I am developing an Angular 5 web application using Visual Studio 2017 and I want to display a report. The web application was created using the Angular SPA Template (ASP.Net Core SPA Templates) and resides in its own Project. I have created a new ReportLibrary Project and following the wizard I defined my first report using the Visual Studio Report Designer. When I preview the report the data is displayed fine.

Within our web application we have developed our own Web API with controllers communicating via repositories to our SQL database and passing data, defined in DTOs, back to the Angular client.

It appears I have to add a new Reporting REST Service Project to my Solution, which I did using the wizard, however when I build the project I get many reference errors.

What I cannot figure out is what to do next to display a report in my Angular web application? I have added the imports to my Angular Reporting Module and created an Angular component to display the report using the code from your 'How To' guide. Within the Report Viewer selector I see I have to configure the report source to display, the example code points to a .trdp file, my report, in my Report Library, appears to be a .cs file.

Some guidance would be very appreciated please.

[Katia]

Hello Chris,

I will post below the reply from support ticket #1160013 that you opened for the same issue:
"It should not be a problem that the viewer is in the project that targets .NET Core and the service is in the project that targets .NET framework 4.6.1. You do not need to reference service project in the project that hosts the viewer. The service needs to be running and the viewer will locate it using the address set as serviceUrl option of the viewer, for example:

Copy Code

[serviceUrl]="'http://myrestserviceurl/api/reports'"

I have tested creating the service using Visual Studio project template (Telerik Reporting REST Service R1 2018) and it builds successfully. What are the exact errors you receive when building the solution? Please attach some screen shots that captures those.

Important: the project template will not enable CORS for the service, it needs to be enabled manually. Enabling CORS is required for allowing the communication between the viewer and the service when they are hosted in different domains. More details on how to enable CORS are provided in Enabling Cross-Origin Requests in ASP.NET Web API 2 MSDN article.

Details on how to add and configure Angular report viewer are provided in the following help articles:
How To: Use Angular Report Viewer with Angular CLI
How To: Use Angular Report Viewer with SystemJS

You can also test working demos that are located in product installation folder: C:\Program Files (x86)\Progress\Telerik Reporting R1 2018\Examples\Angular. Report viewer provided in those demos is connecting to the Reporting REST service located at our Reporting demos site https://demos.telerik.com/reporting/."

In case you have any additional questions or information you can post them here or in the support ticket.


Regards,
Katia
Progress Telerik

[Tuan]

You can demo video or source code for Angular Report and REST service at address. Thank you.

[Lahari]

can anyone know how to generate or integrate angular4 with

 

[Silviya]

Hello Lahari,

Step by step tutorials on how to use Angular Report Viewer with Angular applications (Angular 4+), refer to the following links:
- How To: Use Angular Report Viewer with Angular CLI
- How To: Use Angular Report Viewer with SystemJS

Examples of already configured applications can be found in Telerik Reporting installation folder, for example C:\Program Files (x86)\Progress\Telerik Reporting <VERSION>\Examples\Angular. There are two applications, the first is build with Angular CLI and the second is based on SystemJS.

Regards,
Silviya
Progress Telerik

[Lahari]

hello, silviya.

I haven't got clarity from those links. my requirement is to generate angular reports.i those reports I even need random changing of chart types just like Jasper reports

 

 

[Silviya]

Hello Lahari,

Telerik Reporting is a reporting solution for all .NET cloud, web, and desktop platforms that provides a full range of ready-to-use tools and services to help people throughout your organization create, deploy, and use reports quickly and easily.

Generating reports could be done in several ways:
- as XML report definitions packaged in a zip archive (.TRDP)
- as plain XML format (.TRDX)
- as .NET type report definitions (.CS or .VB files)
More information could be found in Design Reports chapter of our documentation. After creating the report we provide UI components called report viewers covering various technologies (Angular, HTML5/JS, WPF, etc.). They allow to display the report document produced by the report engine in the application UI. For more information refer to Display Reports in Applications.
However, we do not intend to change the existing used framework - System Requirements.

Regards,
Silviya
Progress Telerik