How to use the Native Angular Report Viewer with Report Server for .NET

The article explains how to set up the Native Angular Report Viewer to work with the Telerik Report Server for .NET.

The user account that will authenticate with the Report Server may be any User, including the Guest User, provided there is an enabled Token in its Tokens collection.

Prerequisites

• Review the Native Angular Report Viewer Requirements.
• Installed and running Telerik Report Server for .NET.
• Report Server for .NET's User that will connect from the viewer should have at least one enabled Token.
• Report Server for .NET should contain at least one report that can be accessed by the User account.

Steps

1. Install the Native Angular Report Viewer NPM package with the following command:

   npm install @progress/telerik-angular-native-report-viewer
   

   If you receive a 403 Forbidden Error, you need to register and log in at npmjs.com before performing this step.

   npm login --registry=https://registry.npmjs.org --scope=@progress
   

2. Once installed, import the ReportingAngularViewerModule in your application root module:

   import { ReportingAngularViewerModule } from '@progress/telerik-angular-native-report-viewer';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           BrowserAnimationsModule,
           AppRoutingModule,
           ReportingAngularViewerModule
       ],
       providers: [],
       bootstrap: [AppComponent]
   })
   

3. Install the Angular localize package - Add the localize package

   ng add @angular/localize
   

4. Install one of the Kendo UI for Angular themes, e.g. the Default Theme

   npm install --save @progress/kendo-theme-default
   

5. Reference the theme in the project using one of the supported approaches - Compiling Themes from SCSS Source Files. In this example, we will use the approach with the angular.json configuration, which consists of adding the desired theme inside the styles array - Angular workspace configuration: Styles and scripts configuration:

   "styles": [
       "src/styles.scss",
       "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
   ],
   

6. In the class of the component(e.g. AppComponent) where the viewer will be displayed, define a reportSource object property specifying the category and the name of the report that will be displayed. For example, if the category is Samples and the report is Dashboard, the syntax will look as follows:

   reportSource = {
       report: 'Samples/Dashboard',
       parameters: {}
   }
   

7. In the same component class, define a reportServer object property with a url string pointing to the Report Server for .NET, and a getPersonalAccessToken callback, which will be executed when the report viewer requests from the server to render the report.

   reportServer = { 
       url: 'http://dnikolovlap:81/',
       getPersonalAccessToken: () => fetch('/rs-token').then(response => response.text())
   }
   

   In this example, the getPersonalAccessToken callback makes a request to a /rs-token endpoint that returns the token used to authorize access to using the Report Server for .NET REST API.

   This is the recommended approach, but if an endpoint cannot be exposed, the token can be hardcoded in the callback: getPersonalAccessToken: () => Promise.resolve('TOKEN_STRING')

8. In the HTML template of the component, define the <reporting-angular-viewer> element, and pass the defined properties to their corresponding properties of the Native Angular Report Viewer:

   <reporting-angular-viewer
       serviceType="reportServer"
       [reportServer]="reportServer"
       [reportSource]="reportSource">
   </reporting-angular-viewer>
   

9. Run the application:

   ng serve
   

See Also

• Telerik Report Server for .NET
• Native Angular Report Viewer Options
• Native Angular Report Viewer Commands
• Native Angular Report Viewer Events