Hello Tyler,
after a lot of trying today, i’m able to reproduce the problem. Here’s what i did:
- Downloaded the official PDFTron Angular Example
- Added @angular/pwa to the project
- Added the needed Folders to the angular.json-file
- Tweaked the app.component.ts, so that the FullAPI is loaded and PDFNet.initialize() as well as getPDFDoc is called after the documentLoaded-Event
- Tweaked the ngsw-config.json, so that the lib-Folder and the file-Folder is being cached.
Unfortunately i can’t Upload the ZIP-File with the example …
It seems, that the “ignoreSearch”-Flag has soemthing to do with it. If i delete these Flag in the ngsw-config.json it loads the PDF without the error…
Although the example is with WebViewer Version 8.1 i also have the problem with Version 7.3.3.
Here are the files:
ngsw-config.json:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js",
"/lib/**",
"/files/**"
]
},
"cacheQueryOptions": {
"ignoreSearch": true
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]
}
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/files",
"src/lib",
"src/manifest.webmanifest",
"src/files",
"src/assets"
],
"styles": [
"src/styles.css"
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular:build"
},
"configurations": {
"production": {
"browserTarget": "angular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets",
"src/files",
"src/lib",
"src/manifest.webmanifest"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"angular-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "angular:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular"
}
app.component.ts:
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('viewer') viewer: ElementRef;
wvInstance: WebViewerInstance;
@Output() coreControlsEvent:EventEmitter<string> = new EventEmitter();
private documentLoaded$: Subject<void>;
constructor() {
this.documentLoaded$ = new Subject<void>();
}
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
initialDoc: '../files/webviewer-demo-annotated.pdf',
fullAPI: true
}, this.viewer.nativeElement).then(instance => {
this.wvInstance = instance;
this.coreControlsEvent.emit(instance.UI.LayoutMode.Single);
const { documentViewer, Annotations, annotationManager } = instance.Core;
instance.UI.openElements(['notesPanel']);
documentViewer.addEventListener('annotationsLoaded', () => {
console.log('annotations loaded');
});
documentViewer.addEventListener('documentLoaded', async () => {
this.documentLoaded$.next();
const rectangleAnnot = new Annotations.RectangleAnnotation({
PageNumber: 1,
// values are in page coordinates with (0, 0) in the top left
X: 100,
Y: 150,
Width: 200,
Height: 50,
Author: annotationManager.getCurrentUser()
});
annotationManager.addAnnotation(rectangleAnnot);
annotationManager.redrawAnnotation(rectangleAnnot);
await instance.Core.PDFNet.initialize();
console.log('Initialized');
await documentViewer.getDocument().getPDFDoc();
console.log('getPDFDoc successfull');
});
})
}
ngOnInit() {
}
getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
Best Regards,
Chris
