Report Viewer demo install in Angular CLI

[Ron]

Good morning.

I've been trying to get the demo for Angular CLI working for the last few days. I'm trying the SASS approach and I've noticed that the [templateURL] is consistently running into problems with pulling the telerikReportViewerTemplate-sass.html file in the node_modules/@progress route. I've included both Chrome and Edge errors as the full link shows up better in Edge. I've tried adding ~, ~/, ../, and it seems like anything I try to modify the route and get it working is reversed out by the webpack when I load it. 

As it stands while I'm customized to working with templateURL's in the typescript I'm much less familiar with how the punctuation and other protocol have to work in loading a templateURL within a template and since this is an html page rather css I don't believe a reference in the .angular-cli.json would be useful.

Please take a look at this and let me know if there are any tweaks you see that I'd need to get it up and running.


Thank you.

[Ron]

Unfortunately I can't post the project. The zip is 255K and I'm being told that it's over the 2MB limit. In this case let me know if any additional screen shots or specific files from the project would be helpful.

[Ron]

I'm afraid I can't even send a 6KB zip file with selected components. Can I ticket this directly?

[Silviya]

Hi Ron,

This is a follow up from my answer in the support ticket #1151892 that you sent:

"The How To: Use Angular Report Viewer with Angular CLI help article provides steps to setup correctly the viewer.

Also, if the service and the viewer are hosted in different domains it will be required to enable CORS in order to enable communication between the viewer and the service.

About the not found template error in browser console, it appears that for custom files to be served, they need to be included in the production build. This is done via the assets property in the .angular-cli.json file. 

To learn how to use it: https://github.com/angular/angular-cli/wiki/stories-asset-configuration
Once the template file is moved, together with the styles for the template and styles of kendo theme to the assets folder and modified all links to point there, the application ran correctly."

Regards,
Silviya
Progress Telerik

[Ron]

Silviya,

Admittedly I'm still somewhat new to Angular and Javascript so accordingly some points in my inquiry, like the need for moving the css and html files out of the node_module/@progress dist folders and into the assets folder, could be common knowledge.

The one thing that might be helpful to add here is that the [serviceURL] was changed to https://demos.telerik.com/reporting/api/reports and the [reportSource] to 'report: 'Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary''. Also <link href="assets/all.css" rel="stylesheet"/> needed to be added into the header of the index.html once the css and html files had been copied to the assets folder.

There may have been one or two other details but I think that was the bulk of it.

The main reason I'd like to write those details out here is that I'd rather anyone else who has the same issue be able to refer back to this thread and find what they need. As for whether the Report Viewer installation directions could use any updating or further consolidating of information I'll leave that to the discretion of the Telerik team.

[Silviya]

Hello Ron,

Thank you for the further explanation here as a result of the thread in the support ticket.

I can only include that I changed [serviceUrl] to point our demos, because CORS is enabled there. Also, [reportSource] report to load the demo Report Catalog to avoid errors because of missing report. It was only for testing reasons.

Additionally, the serviceUrl is URL of the service which will provide the report viewer with reports. The service must be properly configured so that the report viewer can successfully communicate with the server. For more information on how to configure the service please check Telerik Reporting REST Services help article.
On the other hand, the reportSource ​specifies which report to be processed. Check Available Report Sources help article.

Regards,
Silviya
Progress Telerik

[Julia]

Dear Ron,

I could say I am also not so profund with angular. However, I find that the provided information for angular implementation is incomplete or outdated. Thank you so much for you comment, I spent one day for searching any information to resolve this issue. Common knowledge or not, the line "[templateUrl]="'node_modules/@progress/telerik-angular-report-viewer/dist/dependencies/telerikReportViewerTemplate-sass.html'" does not make any sense for Angular 6. There should be at least a comment saying, that the assets configuration in angular.json file should allow to load content from this location. It is very frustrating to waste so much time for such issues... Thank you again!

[Silviya]

Hi Julia,

You might find helpful checking this KB article on the same topic - How to style Telerik Angular Report Viewer using Sass-based themes.
The 'templateUrl' containing the node_modules path to the html template can cause not found template error in browser console. For custom files to be served, they need to be included in the production build. This is done via the assets property in the .angular-cli.json file.

Regards,
Silviya
Progress Telerik