1. Home
  2. Forum
  3. Angular
  4. WebPack example for report viewer with report server
Starting in 2019, the Reporting control is no longer included in Essential Studio®. If you're experiencing issues with the Syncfusion� Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion� and appreciate your understanding.

WebPack example for report viewer with report server

Hello,

I want to implement report viewer in my application with angular 2 also using report server (something like in Thread: 131579 https://www.syncfusion.com/forums/131579/report-viewer-angular-2-report-server)

I am trying use example in that thread, but Iam getting an error: Connection refused ().

In that thread there is an example with SystemJS and in documentation (https://help.syncfusion.com/angular/reportviewer/getting-started#load-ssrs-server-reports) there is also example with SystemJS, but I am using WebPack. Maybe you have some working examples using WebPack instead of SystemJS?


18 Replies
UN Unknown Syncfusion Team December 7, 2017 12:00 PM UTC

I think I already have working example. I have one more question for now - is there a possibility to get some report on button click and show that report in new browser tab (also setting a name for tab)?

YD Yuvaraj Devarajan Syncfusion Team December 10, 2017 03:40 PM UTC

Hi AC, 

Thanks for contacting Syncfusion support.  

We have prepared a ReportViewer angular sample to load the report in another tab when clicking the button in home component file as shown in below code example. 

import { Component, Input, Output,EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'ej-app', 
    templateUrl: 'src/reportviewer/reportviewer.component.html',             
                styleUrls: ['src/reportviewer/reportviewer.component.css']          
}) 

export class ReportViewerComponent {                  
    public serviceUrl: string;     
    public reportPath: string; 
                public serverUrl: string;  
                public parameters: any; 
                public reportData: any; 
                public toolbarSettings: any; 

    constructor() { 
        var data = sessionStorage.getItem('ReportName');                    
                                this.serviceUrl = 'http://js.syncfusion.com/ejservices/api/ReportViewer';         
        this.reportPath = data + '.rdl';  
    }           
                reportError(event){          
        alert("Triggers after the suggestion list is opened.");          
        }      

} 

You can download the sample from below location, 

Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team December 11, 2017 11:19 AM UTC

Hello,

thank you for your response! It is working like I want, but I have one more problem now...

When I am trying to Export or print data from reportviewer I am getting an error message.

My .ts file looks like this:

In WebAPI I am using code from sample:


My report opne in new tab like I expecting:


But when I am trying to Export this report I am getting this error:


After Export > PDF (or sth else) I get nothing in my WebAPI PostReportAction method:



UN Unknown Syncfusion Team December 11, 2017 12:41 PM UTC

Maybe this response alsa will be helpful (I am not getting any reportName, maybe I am doing something wrong):



YD Yuvaraj Devarajan Syncfusion Team December 12, 2017 05:55 AM UTC

Hi AC, 

We suspect the mentioned problem might be occurred when ReportViewer export dependent assemblies are not referred in your application. So, we request you to refer the ReportViewer export dependent assemblies in your application to avoid the mentioned problem at your end. Also, please ensure the same build and framework version assemblies are referred in your application. Please find the list of Syncfusion ReportViewer dependent assemblies, 
  • Syncfusion.Linq.Base
  • Syncfusion.Compression.Base
  • Syncfusion.Presentation.Base
  • Syncfusion.OfficeChart.Base
  • Syncfusion.EJ
  • Syncfusion.EJ.MVC
  • Syncfusion.EJ.ReportViewer
  • Syncfusion.Pdf.Base
  • Syncfusion.XlsIO.Base
  • Syncfusion.DocIO.Base
  • Syncfusion.Shared.Wpf
  • Syncfusion.Chart.Wpf
  • Syncfusion.Gauge.Wpf
  • Syncfusion.SfMaps.Wpf

Please refer to the below UG documentation link for more detail, 

Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team December 12, 2017 03:21 PM UTC

Hello,

there is still same problem... Maybe I need to do something different if I am using WebAPI, but not MVC?

Maybe I need to use some additional parameters or sth? WebAPI was build from zero, without implementing MVC from start.

Also, maybe this is the same problem but the print function is also not working. I am getting empty document:


On print I am getting this information to my WebAPI:


What I must get in PostReportAction for operation to be correct?

YD Yuvaraj Devarajan Syncfusion Team December 13, 2017 11:43 AM UTC

Hi AC, 

Thanks for the update. 

We have checked the mentioned problem in ReportViewer Angular sample with external WebAPI project and its working properly at our end. So can you please share the issue reproducible RDL file and ReportViewer dependent assembly version to validate the mentioned problem at our end. For your reference, we have prepared a sample with WebAPI project and if the issue still persists, then revert the sample with issue reproducible procedure to validate the mentioned problem at our end. Please find the sample from below location, 

Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team December 13, 2017 03:24 PM UTC

Hello,

I reproduced my error with your example.

I added files: Startup.cs and changed WebApiConfig.cs

Also I added .dll files:
Owin.dll
Microsoft.Owin.dll
Microsoft.Owin.Host.SystemWeb

All changed files and added dll's is in project.

I am sending example with error on exporting data from ReportViewer. (I am sending only WebAPI. In AngularSample I only changed path from this.serviceUrl = 'http://localhost:57958/api/ReportApi' to this.serviceUrl = 'http://localhost:57958/ReportApi'

Attachment: WebAPIProject2015787784_757f54ba.rar

UN Unknown Syncfusion Team December 14, 2017 06:40 AM UTC

The problem starts when I am adding reference to Microsoft.Owin.Host.SystemWeb.dll. After adding other *.ddl files there are no problems with export/download/print functions.

YD Yuvaraj Devarajan Syncfusion Team December 14, 2017 10:35 AM UTC

Hi AC, 
 
On further analysis of the shared sample, the mentioned problem occurs due to when the WebAPI register method is overwrite in owin startup.cs file. In which you have registered the WebAPI in both Owin startup class page and Global.asax page, hence the post form data is not passed to IReportController while exporting in ReportViewer. So we request you to avoid registering WebAPI configure in owin startup class to avoid the mentioned problem at your end as shown in the following code example,  
  
Startup.cs  
        public void Configuration(IAppBuilder app) 
        { 
            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888 
            var config = new HttpConfiguration(); 
 
            // Registering config within WebApiConfig 
            //WebApiConfig.Register(config); 
 
            // Using config 
            app.UseWebApi(config); 
        } 
 
 
We have modified the shared WebAPI project and it can be downloaded from below location,  
  
Regards,  
Yuvaraj D.  


UN Unknown Syncfusion Team December 14, 2017 12:25 PM UTC

Hello again,

thant you for your response, it was very helpful! Now export is working properly!

But now I have one more question about component working between different browsers.

Print function is still showing and printing empty page, but only while using Chrome browser. On other platforms everything is working with this function.

Also using Mozilla Firefox clicking Export button reloads browser window. Same problem with reload is with Export from ReportViewer and also from grid.

If I must set some properties for exporting or it could be just browsers problems?

YD Yuvaraj Devarajan Syncfusion Team December 15, 2017 12:40 PM UTC

Hi AC, 

Print function is still showing and printing empty page, but only while using Chrome browser. On other platforms everything is working with this function. 
We were unable to reproduce the mentioned problem at our end. We have checked the previously shared Agular application in chrome and Mozilla Firefox browser in which the export and print option are working properly at our end. So can you please share the browser version details to validate the mentioned problem at our end.    

Also using Mozilla Firefox clicking Export button reloads browser window. Same problem with reload is with Export from ReportViewer and also from grid. 
We have analyzed your query and we are unable to reproduce the reported issue “while exporting browser window get reloaded” from our end. We have prepared a sample and it can be downloadable from the below location.  

Please provide the following details for better assistance.  
  • Share screen shot or video demonstration of the issue.
  • Share full Grid code example both server and client side.
  • Share Essential Studio version details.
  • Share mozilla firefox browser version details.
  • If possible share the sample or reproduce the issue in the attached sample.


Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team January 19, 2018 08:47 AM UTC

Hello again,

I am still having a problem with printing and exporting in different browsers.

I tried it with online reportviewer example and it is the same problem as in my application: http://ng2jq.syncfusion.com/#/reportviewer/territorysales;theme=bootstrap

In Chrome browser when I click print button, first of all print pop-up is blocked by default (I do not know if it should be like that). Also, right before print window shows, all content (theme or sth like that) is refreshing (I do not think that it should work like that). In Mozilla Firefox browser also print pop-up is blocked by default, but the content is not refreshing so it is good. But in Mozilla Firefox there are no image while trying to print.

This is the picture how page looks right before print window loads:


And this is the picture how looks print preview in Mozilla:


We tried it on different computers, so I don't think that it is my own computer problem...

YD Yuvaraj Devarajan Syncfusion Team January 24, 2018 06:09 PM UTC

Hi AC, 

In Chrome browser when I click print button, first of all print pop-up is blocked by default (I do not know if it should be like that).  
We can load the print preview window in next tab of browser instead of loading the print preview popup. Please find the below code snippet to load the print preview window in next tab. 

Typescript: 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ej-app', 
    templateUrl: 'src/reportviewer/reportviewer.component.html',             
                styleUrls: ['src/reportviewer/reportviewer.component.css'] 
}) 

export class ReportViewerComponent { 
    public serviceUrl: string;     
    public reportPath: string; 
                public serverUrl: string; 
                public parameters: any; 

    constructor() { 
        this.serviceUrl = 'http://js.syncfusion.com/demos/ejServices/api/ReportViewer';  
        this.serverUrl = 'http://mvc.syncfusion.com/reportserver';                    
        this.reportPath = '/SSRSSamples2/Territory Sales new';                          
    } 
                 
                renderingBegin(args:any){ 
                                args.model.printOption = ej.ReportViewer.PrintOptions.NewTab;            
    }           
} 

Html: 

<ej-reportviewer id="reportViewer_Control" 
                [reportServiceUrl] = "serviceUrl"  
                [processingMode] = "Remote" 
                [reportServerUrl] = "serverUrl" 
                [reportPath] = "reportPath"  
                [dataSources]="reportData"     
              (renderingBegin)="renderingBegin($event)" 
                [parameters] = "parameters"> 
</ej-reportviewer> 


Also, right before print window shows, all content (theme or sth like that) is refreshing (I do not think that it should work like that). 
We have checked the mentioned problem in our online sample browser and its working properly at our end. In which the print preview does not get refreshed in chrome preview window. So can you please share the chrome browser version to validate the mentioned problem at our end. 
 In Mozilla Firefox browser also print pop-up is blocked by default, but the content is not refreshing so it is good. But in Mozilla Firefox there are no image while trying to print. 
We have already fixed the mentioned problem in our latest Essential studio build release. We have not merged the changes in our online samples and the changes will be reflected in our upcoming volume 1 2018 release.  

Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team January 25, 2018 08:19 AM UTC

Hello,

about pop-up now it is good after these changes. Window in no longer blocked as pop-up.

about Chrome content refreshing - now I have latest Chrome version (64.0.3282.119 (64 bit)) and it is still the same problem.

another problem with export in Mozilla - on export the window is refreshing. I am using the same route path for all our application (I have one main window and in that window there are components in other components, but the route path is the same for everything) and after export the window refresh and because of that I am getting the starting page of application. Maybe you know how to fix that problem? With Chrome there are no such problem, the view after export is the same like before export. (Mozilla version is 58.0 (64-bit)). The same  problem is also with grid export not only with export from ReportViewer.

And also before I forgot to mention one more problem with printing in chrome. If I want to use system dialog for printing print window just closes (it shows system dialog for printing for about a second and after that the window just closes). It is working like that also with your sample application.


YD Yuvaraj Devarajan Syncfusion Team January 26, 2018 04:47 PM UTC

Hi AC, 
 

about Chrome content refreshing - now I have latest Chrome version (64.0.3282.119 (64 bit)) and it is still the same problem. 
 
another problem with export in Mozilla - on export the window is refreshing. I am using the same route path for all our application (I have one main window and in that window there are components in other components, but the route path is the same for everything) and after export the window refresh and because of that I am getting the starting page of application. Maybe you know how to fix that problem? With Chrome there are no such problem, the view after export is the same like before export. (Mozilla version is 58.0 (64-bit)). The same  problem is also with grid export not only with export from ReportViewer. 
 
We have checked the mentioned problem in Angular ReportViewer, Grid sample and its working properly at our end. So we need some additional information to find the cause of the issue. Please share us the following details.  
 
Please ensure to follow the steps provided in the documentation Link:-  
 
1. Grid and ReportViewer code example (both in server and client side).  
 
2. Screenshot/Video Demo to replicate the issue.  
 
3. If possible provide an issue reproducing sample or hosted link.  
 
The provided information will be helpful to provide you response as early as possible. 
  

And also before I forgot to mention one more problem with printing in chrome. If I want to use system dialog for printing print window just closes (it shows system dialog for printing for about a second and after that the window just closes). It is working like that also with your sample application. 
We have checked the mentioned problem by using “Print Using System Dialog” option in chrome browser and the print is not closed at our end. We have prepared a demo video and it can be downloaded from below location, 
 
If the issue still persists, then share the issue video or sample application to validate the mentioned problem at our end.    
 
Regards, 
Yuvaraj D. 


UN Unknown Syncfusion Team January 29, 2018 07:10 AM UTC

Export in Mozilla:
I am adding video where you can how window refreshes after exporting file from reportviewer (file name Mozilla.mp4).
Also, this is server side report viewer code (using like in example):

And this is Client Side report viewer code (also using code from example):


Print in Chrome:
I am adding video (name Chrome.mp4) where you can see how content refreshes (4 second) and how print window disappears on click Print using system dialog (here I am using online sample http://ng2jq.syncfusion.com/#/reportviewer/territorysales;theme=bootstrap but it is the same when I am using my own application).


Attachment: Videos_638f121c.zip

VS Vinoth Srinivasan Syncfusion Team February 5, 2018 01:06 PM UTC

Hi AC, 

We were able to reproduce the issues in our end and facing technical difficulties in identifying the root cause of the problem, so we have created a support ticket to follow up this problem. Please log on to our support website to check for further updates. 


Regards, 
Vinoth S 


Loader.
Up arrow icon