Issues with TelerikReports upgrade to 2023 R3, with Angular front end reports wrapper

Question

I updated my front end package.json to use the Telerik Angular Report Wrapper (published in Nov 2023):

"@progress/telerik-angular-report-viewer": "^20.23.1114", 

i.e. as per npm - "This version .. requires Telerik Report Server .. 17.2.23.1114.

and the backend to Telerik.Reporting 17.2.23.1114:

---

• Now when I access the stats page in our website

  http://oak-3cvrvv3/Har/en-US/#/statistics

• I get the error:

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

Now in Postman, this Post request on the OLD version just returns a clientId

 https://devapp01.topsyn.com/har/api/reports/clients

But when I make the same request in my upgrade local envir, I get errors:

---------------------------------------------------------------------

• and my ReportsController in .net 4.6

using System;
using System.Collections.Generic;
using System.IO;
using System.Web.Http;
using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.WebApi;
using System.Web;
using Telerik.Reporting.Services;
using Telerik.Reporting;

namespace SynWAPI.Controllers
{
    [AllowCrossSiteJson]
    [RoutePrefix("api/reports")]
    public class ReportsController : ReportsControllerBase
    {
        [HttpGet]
        [Route("IsReady")]
        public IHttpActionResult IsReady()
        {
            return Ok("OK Dude !");
        }

       // new method for latest TelerikReports 2023 release, as per https://docs.telerik.com/reporting/embedding-reports/host-the-report-engine-remotely/rest-service-report-source-resolver/use-custom-report-source-and-document-resolvers?_ga=2.110664256.43783964.1705943251-1117489418.1701363987&_gl=1*3x39f9*_ga*MTExNzQ4OTQxOC4xNzAxMzYzOTg3*_ga_9JSNBCSF54*MTcwNjExMTg5NC4yMC4xLjE3MDYxMTI5MTMuNDYuMC4w*_gcl_au*NTYzNzA2MTUwLjE3MDEzNjM5ODY.
        public ReportSource Resolve(string uri, OperationOrigin operationOrigin, IDictionary<string, object> currentParameterValues)
        {
            {
                var appPath = HttpContext.Current.Server.MapPath("~/");
                string reportPath = Path.Combine(appPath, @".\Reports");

                var reportPackager = new ReportPackager();
                Report report = null;
                using (var sourceStream = System.IO.File.OpenRead(reportPath))
                {
                    report = (Report)reportPackager.UnpackageDocument(sourceStream);
                }              
                return new InstanceReportSource
                {
                    ReportDocument = report
                };
            }
        }

        //[Obsolete]
        //protected override IReportSourceResolver CreateReportResolver()   // THIS IS THE PRE-UPGRADE METHOD, WHICH CURRENTLY WORKS IN PRODUCTION 
        //{
        //    var appPath = HttpContext.Current.Server.MapPath("~/");
        //    var reportsPath = Path.Combine(appPath, @".\Reports");

        //    return (IReportSourceResolver)new ReportFileResolver(reportsPath).AddFallbackResolver(new ReportTypeResolver());
        //}

        [Obsolete]
        protected override ICache CreateCache()
        {
            return Telerik.Reporting.Services.Engine.CacheFactory.CreateFileCache();
        }
    }
}

Answer 1

Several things we ended up doing, with help from this support ticket: https://www.telerik.com/forums/upgrading-telerikreports-to-2023-r3-trial-version-with-angular-front-end

Firstly, I installed the TelerikReports 2023 SP1 Trial .msi pacakge on my box. See C:\Program Files (x86)\Progress, and the Telerik Reporting R3 2023 folder has an "examples" section.

Opening our solution, I IGNORED the Telerik Upgrade Wizard.

1. Starting from old version of my .net solution, using NuGet Manager to first upgrade to NewtonSoft v13.0.3.

2. Using NuGet Manager "browse" window, find and install both Telerik.Reporting.Trial v17, as well as the v17 WebApi

3. Open up the .Net backend samples in this project dir: C:\Program Files (x86)\Progress\Telerik Reporting R3 2023\Examples\CSharp\.NET Framework\ReportingRestServiceCorsDemo

4. The "greedy route in the routes configuration" issue: the Telerik routes should go first - see WebApiConfig.cs :

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {            
        // Web API configuration and services
        config.SetCorsPolicyProviderFactory(new CorsPolicyFactory());
        config.EnableCors();           

        // Web API routes
        config.MapHttpAttributeRoutes();

        // TELERIK ROUTES needs to go first.
        ReportsControllerConfiguration.RegisterRoutes(GlobalConfiguration.Configuration);

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );        
    }
}

5. Finally, the ReportController.cs itself, also in their sample proj. Ours was quite old. Here's the new:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using ....Objects;
using ....Common.Converter;
using ApplicationWAPI.Models;
using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.Engine;
using Telerik.Reporting.Services.WebApi;
using System.Web;
using Telerik.Reporting.Cache.File;
using Telerik.Reporting.Services;

namespace ApplicationWAPI.Controllers
{
    [AllowCrossSiteJson]
    [RoutePrefix("api/reports")]
    public class ReportsController : ReportsControllerBase
    {

        static readonly ReportServiceConfiguration configurationInstance =
        new ReportServiceConfiguration
        {
            HostAppId = "MyApp01",
            ReportSourceResolver = new UriReportSourceResolver(HttpContext.Current.Server.MapPath("~/Reports"))
                .AddFallbackResolver(new TypeReportSourceResolver()),
            Storage = new FileStorage(),
        };

        public ReportsController()
        {
            this.ReportServiceConfiguration = configurationInstance;
        }
    }
}

6. Using Postman (or whatever) run your local proj and try to hit the ReportsController - i.e. http://localhost:49759/api/reports/formats You should get some metadata back from the Telerik DLLs:

[{"name":"PDF","localizedName":"Acrobat (PDF) file"},{"name":"CSV","localizedName":"CSV (comma delimited)"},{"name":"XLS","localizedName":"Excel 97-2003"},{"name":"RTF","localizedName":"Rich Text Format"},{"name":"IMAGE","localizedName":"TIFF file"},{"name":"MHTML","localizedName":"Web Archive"},{"name":"XPS","localizedName":"XPS Document"}]

7. For the front-end, if you're using angular go here:

https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/angular-report-viewer/angular-report-viewer-overview

ex/

<tr-viewer    
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="telerikTemplateUrl"
    [parameters]="{
        editors: {
            multiSelect: 'COMBO_BOX',
            singleSelect: 'COMBO_BOX'
        }
    }"
>
</tr-viewer>

8. Front-end, updated HTML templates

   See C:\Program Files (x86)\Progress\Telerik Reporting R3 2023\Html5\ReportViewer\templates