using the angular report viewer in an angular 19 app to display a report from our Telerik Report Server

[Trudy]

Need assistance in how I can integrate the report viewer in my angular 19 application so I can have users pull up reports from our running Telerik report server.

 

I keep getting this error

Cannot access the Reporting REST service. (serviceUrl = 'http://localhost:81/api/reports'). Make sure the service address is correct and enable CORS if needed. (https://enable-cors.org)

 

I've created a route component for this function (which will be a hyperlink on the client) for pulling up a specific report.

the <task name>.component.html just has the <tr-viewer> element

the <task name>.component.ts has the implementation

[Trudy]

and I have CORS enabled in my Report Server

[Dimitar]

Hello Trudy,

Thank you for the attached files and the additional information!

I noticed that you had opened a support ticket on the same topic and I have already written my reply there. However, since the information that I shared with you privately may be of use to another user who happens to visit this thread, I will copy my reply here as well. Please feel free to continue the discussion in either place if you have any additional questions and/or comments.

I inspected the provided component files and noticed that in the HTML file, it seems that you are trying to use the Angular Report Viewer with the new Report Server for .NET. The reason I believe that to be the case is that you are using the service on port 81 where the Report Server for .NET is hosted, and also the screenshots you shared in the additional replies.

The Report Server for .NET is still in active development and we do not recommend using it in production as it does not yet offer the same functionalities as the older report server. For example, it is not yet capable of interacting with external report viewers. That is because the Report Server for .NET uses a different authentication schema.

This issue is known and also logged on the public portal, I have cast your vote for the item so that you will be subscribed to updates on its status - HTML5 Report Viewer cannot connect to report server for .NET.

Considering the above issue, and that you wish to connect the Report Server to an external report viewer, I recommend using the older Report Server application that is running on .NET Framework 4.6.2. It is installed on port 83, for example - http://localhost:83/.

Note that when connecting to a Report Server with the Angular Report Viewer, there is a dedicated property that can be used instead of the serviceUrl property. The reason is that besides the URL, it is necessary to also provide credentials that the report viewer can use to log in and use the service. For example:

<tr-viewer
    [containerStyle]="viewerContainerStyle"
    [reportServer]="{
        url: 'http://localhost:83/',
        username: 'myusername',
        password: 'mypass'
    }"
    [reportSource]="{
        report: 'Samples/Dashboard',
        parameters: {}
    }" >
</tr-viewer>

For more information and examples on the topic, you may visit the Using Angular Report Viewer with Telerik Report Server - Telerik Reporting article.

Please try to use the Report Server as shown in the example above and the report viewer should be able to successfully connect and preview the report.

Regards,
Dimitar
Progress Telerik