Welcome to ng2-pdfjs-viewer Discussions!

[codehippie1]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[shwetaslb]

Hi, I was try using simplest code and to load the pdf using ng-pdfjs-viewer but somehow it says missing pdf, I have kept pdf into src/assets/pdf still when I open http://localhost:4200/ it says

where's I am wrong adding used code for support and I am using

Angular CLI: 17.3.17
Node: 22.12.0 (Unsupported)
Package Manager: npm 10.9.3
OS: win32 x64

Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.17
@angular-devkit/build-angular 17.3.17
@angular-devkit/core 17.3.17
@angular-devkit/schematics 17.3.17
@angular/cdk 17.3.10
@angular/cli 17.3.17
@angular/material 17.3.10
@schematics/angular 17.3.17
rxjs 7.8.2
typescript 5.4.5
zone.js 0.14.10
these versions of angular and node
for module.ts
`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; // <-- import this
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
PdfJsViewerModule,
MatProgressSpinnerModule,
MatIconModule // <-- add this here
],
// schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent],
providers: [
provideAnimationsAsync()
]
})
export class AppModule { }

for app.html
<ng-template #loadingTemplate>

Loading your document...

<ng-template #errorTemplate>

error_outline

Oops! Something went wrong

We couldn't load your PDF. Please try again.

Retry

<ng2-pdfjs-viewer
pdfSrc="assets/test.pdf"
[customSpinnerTpl]="loadingTemplate"
[customErrorTpl]="errorTemplate"

for app.component.ts
import { Component, ViewChild } from '@angular/core';
import { PdfJsViewerComponent } from "ng2-pdfjs-viewer";

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {
@ViewChild("pdfViewer") pdfViewer!: PdfJsViewerComponent;

async goToPage(page: number) {
await this.pdfViewer.goToPage(page);
}
retry() {
// Logic to retry whatever operation failed
console.log('Retry clicked');
}
}

and in angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"pdfjs-viewer": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/pdfjs-viewer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "node_modules/ng2-pdfjs-viewer/pdfjs",
"output": "/assets/pdfjs"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "pdfjs-viewer:build:production"
},
"development": {
"buildTarget": "pdfjs-viewer:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "pdfjs-viewer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
}
}

and on localhost it shows like this

`

[codehippie1]

Can you create a minimally reprocible repo and share it? A code sandbox is best.

[shwetaslb]

Hi, it loaded, once I kept my pdfs in asset/pdf/test.pdf not just asset/test.pdf.
and I asked chatgpt somehow it says this is happening because here we are using iframe so iframe treats relative path differently.
Let me know if I am making sense.

[codehippie1]

Post your code on Github as a sample. I am intrigued

[shwetaslb]

https://github.com/shwetaslb/pdfjs-viewer
I have posted it here, please check, and let me know if any other insights.
My bad added wrong url earlier.

[codehippie1]

@shwetaslb Try this on the latest version (25.0.11) and let me know if this is still an issue.