New to Telerik Reporting? Download free 30-day trial

Adding the Native Angular Report Viewer with the Project Item Generator

This tutorial demonstrates how to add the Native Angular Report Viewer component to an Angular application using the Project Item Generator from the Telerik Reporting Productivity Tools Visual Studio Code extension.


The following list describes the prerequisites for completing the tutorial:


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

    npm install @progress/telerik-reporting-schematics

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

    npm login --registry= --scope=@progress
  2. Right-click where you want to add the new report viewer component and select the "New Telerik Reporting Angular Project Item" option.

    VS Code context menu option location - last

  3. The scaffolding wizard will open, showing the available component options. Set the Service url option to the URL of your Reporting REST Service API, the Report option to the report you wish to preview, and click Create. If you do not set these options, the Public Reporting Demos API will be used and the report will be "Report Catalog.trdx".

    VS Code Telerik Reporting Project Item Generator

  4. Import the new component generated by the wizard.

    If you have an Angular 16 (or earlier) application, you may import the component in your application root module. Ensure the BrowserAnimationsModule is imported as well.

    import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        import { ReportViewerPageComponent } from './report-viewer-page/report-viewer-page.component';
        import { AppComponent } from './app.component';
        declarations: [
        imports: [
        providers: [],
        bootstrap: [AppComponent]
        export class AppModule { }

    If you have an Angular 17 application, you can import the component in your app.component.ts file.

    import { Component } from '@angular/core';
        import { RouterOutlet } from '@angular/router';
        import { ReportViewerPageComponent } from './report-viewer-page/report-viewer-page.component';
            selector: 'app-root',
            standalone: true,
            imports: [ RouterOutlet, ReportViewerPageComponent ],
            templateUrl: './app.component.html',
            styleUrl: './app.component.scss'
        export class AppComponent {
            title = 'my-angular-application';
  5. If you have an Angular 17 application, import provideAnimations from @angular/platform-browser/animations in app.config.ts.

    import { ApplicationConfig } from '@angular/core';
        import { provideRouter } from '@angular/router';
        import { provideAnimations } from '@angular/platform-browser/animations'
        import { routes } from './app.routes';
        export const appConfig: ApplicationConfig = {
            providers: [provideRouter(routes), provideAnimations()]
  6. Utilize the selector of the new report viewer component somewhere in the application.

  7. Run the application start script:

    npm run start

See Also

In this article