ERROR Error: Uncaught (in promise): Invalid clientID

[Godfrey]

Hi folks 

I'm having problem with Telerik Reporting using Angular 8. it throwing this error ERROR Error: Uncaught (in promise): Invalid clientID. 

the below is how i setup viewer.

<tr-viewer #viewer1
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]= "'http://example/api/reports'"
    [templateUrl]="'/assets/template.html'"
    [reportSource]="{
        report: 'BillingDetails.trdx',
        parameters: {}
    }"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0">
</tr-viewer>

 

WEB API 

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
 [RoutePrefix("api/reports")]

        protected override Telerik.Reporting.Cache.Interfaces.ICache CreateCache()
        {
            return CacheFactory.CreateFileCache();
        }

        protected override Telerik.Reporting.Services.Engine.IReportResolver CreateReportResolver()
        {
            string reportsPath = HttpContext.Current.Server.MapPath("~/ReportFiles");

            var r = new ReportFileResolver(reportsPath).AddFallbackResolver(new ReportTypeResolver());

            return r;
        }
    

Client side is separated from webAPI, i'm making Http calls to request resources from web API. JQuery and/or Angular 8 solutions will be appreciated. 

Thanks

 

[Nasko]

Hello Godfrey,

I tested with the Angular example application which comes with the installation of Telerik Reporting (usually in C:\Program Files (x86)\Progress\Telerik Reporting R2 2020\Examples\Angular\CLI). Just changed the serviceUrl to point to the Html5Demo application located in the same examples folder and enabled CORS there. All worked correctly. Can you test the same approach on your end?

If the issue persists, please provide a Fiddler/Network log and/or a sample application exhibiting the issue.

Regards,
Nasko
Progress Telerik

[Godfrey]

Hi Nasko 

First of all, the api/reports/formats is working, it returns array of objects. which mean the api is working as expected.

Secondly, angular  application is not working, it can load the template but within it  it showing this error message "Unable to get report Paramerer".  see the attached files to view the network logs and console logs. i have enabled the cors. see the below and the attached 

    using System.Web.Http.Cors;
    [EnableCors(origins: "http://localhost:4400", headers: "*", methods: "*")]

 

Please advise. this it shouldn't be difficult.  

 

 

[Todor]

Hi Godfrey,

The CORS of the REST Service is indeed enabled as the requests prior to Get Report Parameters pass successfully. The error when trying to get the parameters is 405 'Method Not Allowed', which is not expected. You may see possible reasons for the error, for example in the 405 Method Not Allowed: What It Is and How to Fix It post.

Did you replicate the problem with our Angular demo?

If you need further help you may send us a runnable application for investigation.

Regards,
Todor
Progress Telerik

[Godfrey]

Hi Todor 

Yes, i'm using Angular demo with C# web API. I can't upload executable code using compressed (zipped) folder, the size of my files are as 73 013 KB and 12 513KB, please advise how to upload these files. 

 

 

 

Looking forward to hearing from you. 

Thanks.

 

[Todor]

Hello Godfrey,

You may upload files up to 40MB in a Support Ticket. In the Forum tickets, you may attach only images.

You may delete the node_modules folder, pack the project and upload it in a Cloud Storage like Google Drive and send us the link.

Regards,
Todor
Progress Telerik

[Godfrey]

Morning Todor 

Please navigate to this google drive link to view source codes https://drive.google.com/drive/folders/1zE8Rfwc4-SD51CBXIWQWCgXtjFIjznGU?usp=sharing 

Looking forward to hearing from you.

Thanks.

[Todor]

Hi Godfrey,

Unfortunately, I have no access to the project - see the attached screenshot. I have requested access from my Google account. I guess you need to approve it.

Regards,
Todor
Progress Telerik

[Godfrey]

Hi Todor

Now you should have access to the source codes. Please check and advise.

Regards

Godfrey

[Todor]

Hi Godfrey,

I confirm that I was able to download the projects and reproduce the CORS issue.

I added the following necessary line in the Global.asax file:

protected void Application_Start()
{
    GlobalConfiguration.Configuration.EnableCors();
    ...

I had to remove the following section from the web.config file as it added a second CORS header, which was not allowed:

<httpProtocol>
	<customHeaders>
		<add name="Access-Control-Allow-Origin" value="*" />
	</customHeaders>
</httpProtocol>

The last problem was that the EnableCors attribute in the ReportsController referenced "http://localhost:4400" and I changed the port to 4200: 

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

This was sufficient for the Angular project to access the service. I have linked this silent video for your reference.

Regards,
Todor
Progress Telerik

[Henrik]

In fiddler I can see the reponse

 

{"Message":"An error has occurred.","ExceptionMessage":"The type initializer for 'Telerik.Reporting.Cache.Lock' threw an exception.","ExceptionType":null,"StackTrace":null}

[Dimitar]

Hi Henrik,

We are currently investigating the problem in a support ticket due to the complicated scenario but for other users experiencing this problem, it is likely that the issue will be resolved by following the ASP.NET Core Project Crashes as External Assemblies Cannot Be Found - Telerik Reporting KB article.