Error loading the report viewer's templates.

[Tuan]

I have Rest Service (ASP.Net Web Application-->Empty-->check MVC)

Result: successed (pictrure: 1.jpg)

I have project Angular and call Rest Service

<tr-viewer [containerStyle]="viewerContainerStyle"
[serviceUrl]="'http://localhost:56342/api/reports'"
[viewMode]="'INTERACTIVE'"
[scaleMode]="'SPECIFIC'"
[scale]="1.0">
</tr-viewer>

Error (picture: 2.jpg)

Error loading the report viewer's templates. 

 

[Silviya]

Hello Tuan,

Based on the first attached image, it seems that the REST Service is working since you can successfully request the JSON with export formats.

However, receiving the "No 'Access-Control-Allow-Origin' allowed access" error in the Browser console means that there is no Cross-Origin Resource Sharing (CORS) enabled. 
Like in your scenario, the Angular viewer and the REST Service are in a separate projects and they are running on different hosts, so CORS should be enabled.

 

I have attached a short video demonstrating how to enable CORS for the REST Service. The video is silent, in .swf format that could be played in a Browser with installed Flash plugin.

Regards,
Silviya
Progress Telerik

[Tuan]

Thank you very much.

[Raul]

I have the same problem, but whit Angular, somebody may help me please. the video from Silviya does´t work, only have a two images.

[Silviya]

Hi Raul,

Please note that enabling CORS configuration have to be utilized in the REST Service project, not in Angular application. For more information, please refer to Enable CORS and Enabling Cross-Origin Requests in ASP.NET Web API 2.

Regards,
Silviya
Progress Telerik

[Tom]

Silviya, you are a genius! I’m new to Telerik Reporting and have been stuck with a broken REST service for weeks. I stumbled upon this post and your video was PERFECT! I was running my Viewer client in a separate project from the REST server without CORS and my handlers were not right from having done NuGet updates. Problem solved and we’re finally now making progress with Progress! Thanks for being a great help!!

[Karthic]

Please check the below links and it has some information

https://docs.telerik.com/reporting/html5-viewer-troubleshooting

https://github.com/telerik/reporting-docs/blob/master/knowledge-base/angular-error-loading-report-viewers-templates.md

 

 

[Juan]

i tried this but still get the same error. please helme

 

Error loading the report viewer's templates. (templateUrl = 'http://localhost:3200/api/reports/resources/templates/telerikReportViewerTemplate-14.1.20.513.html/').

[kzimny]

Hi, .net core 3.1 and the same problem at my side.

Error loading the report viewer's templates. (trvTemplateUrl = 'http://localhost:64900/api/reports/resources/templates/telerikReportViewerTemplate-14.1.20.603.html/').

[Juan]

 

HI.

 

already solved!
I had to add a template.html in my project in the assests folder and that's it.
you can take the template from the resources installed in the telerik reporting

C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Html5\ReportViewer\templates

this saved my life!

https://github.com/telerik/reporting-docs/blob/master/knowledge-base/how-to-load-telerik-report-viewer-resources-locally-in-angular-application-and-use-them-to-customize-the-viewer.md

 

 

[Bob]

I have an o-pen support ticket on this.

It get replied to every 24 hours and in the meantime my production site is down.

No changes to npm/yarn package version in angular and no changes to nuget packages in dotnet core.

Is the idea to ignore all posts until we all choose a different reporting engine which works?