This is a migrated thread and some comments may be shown as answers.
Report Viewer demo install in Angular CLI
7 Answers 146 Views
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 01 Feb 2018, 02:48 PM
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.

7 Answers, 1 is accepted

Sort by
0
Ron
Top achievements
Rank 1
answered on 01 Feb 2018, 02:50 PM
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.
0
Ron
Top achievements
Rank 1
answered on 02 Feb 2018, 05:46 PM
I'm afraid I can't even send a 6KB zip file with selected components. Can I ticket this directly?
0
Silviya
Telerik team
answered on 06 Feb 2018, 12:11 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
answered on 07 Feb 2018, 02:05 PM

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.

0
Silviya
Telerik team
answered on 07 Feb 2018, 02:44 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Julia
Top achievements
Rank 1
answered on 06 Jul 2018, 10:50 AM

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!

0
Silviya
Telerik team
answered on 11 Jul 2018, 07:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Ron
Top achievements
Rank 1
Answers by
Ron
Top achievements
Rank 1
Silviya
Telerik team
Julia
Top achievements
Rank 1
Share this question
or