Create PDF Viewer in Angular 17+ without –no-standalone flag

21 Sep 20245 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.

Setup Angular Environment

You can use the Angular CLI to setup your 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

Confirm that there is an ‘ej2-pdfviewer-lib’ directory within your public directory, housing the assets of the PDF Viewer library.
Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the Troubleshooting section.

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.component.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

Add the Angular PDF Viewer component’s styles as given below in src/styles.css file.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';

Run the application

Use the following command to run the application in browser.

ng serve --open

The output will appear as follows.

app.component.ts
main.ts
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.component.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));