How to Create a Standalone PDF Viewer in Angular 17 (no Flag) in

25 Aug 20265 minutes to read

This section explains the steps required to create a simple Standalone Angular PDF Viewer in Angular 17 and above without –no-standalone flag.

Set up Angular Environment

Use the Angular CLI to create and manage Angular applications.
To install the latest Angular CLI globally use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using the Angular CLI command as follows.

ng new my-app
cd my-app

Installing Syncfusion® PDF Viewer package

All the available Essential® JS 2 packages are published in npmjs.com registry.

  • To install PDF Viewer component, use the following command.
npm install @syncfusion/ej2-angular-pdfviewer --save
  • Copy the contents of the ej2-pdfviewer-lib folder from ./node_modules/@syncfusion/ej2-pdfviewer/dist to the src/assets directory using the command:
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib  src/assets/ej2-pdfviewer-lib

On Windows, use an equivalent command or add an npm script to copy assets cross-platform. Ensure the development server serves WebAssembly with the Content-Type: application/wasm MIME type; see the Troubleshooting section for details.

Registering PDF Viewer Module and Adding PDF Viewer component

Import PDF Viewer module into Angular application from the package @syncfusion/ej2-angular-pdfviewer and add the Angular PDF Viewer by using <ejs-pdfviewer> selector in template section of the src/app/app.component.ts file to render the PDF Viewer component.

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  PdfViewerModule, LinkAnnotationService, BookmarkViewService,
  MagnificationService, ThumbnailViewService, ToolbarService,
  NavigationService, TextSearchService, TextSelectionService,
  PrintService, FormDesignerService, FormFieldsService,
  AnnotationService, PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  //declaration of ej2-angular-pdfviewer module into imports
  imports: [RouterOutlet, PdfViewerModule],
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  styleUrl: './app.css',
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
  ngOnInit(): void {
  }
}

Adding CSS reference

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example. Install the Tailwind 3 theme package:

npm install @syncfusion/ej2-tailwind3-theme

Add the PDF Viewer theme style reference to src/styles.css. The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

Run the application

Use the following command to run the application in the browser.

ng serve --open

The output will appear as follows.

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  PdfViewerModule, LinkAnnotationService, BookmarkViewService,
  MagnificationService, ThumbnailViewService, ToolbarService,
  NavigationService, TextSearchService, TextSelectionService,
  PrintService, FormDesignerService, FormFieldsService,
  AnnotationService, PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, PdfViewerModule],
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  styleUrl: './app.css',
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
  ngOnInit(): void {
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));