How to import types from pdfjs-dist/types/web/ in Angular 17? #18295

Tucaen · 2024-06-19T13:36:22Z

Tucaen
Jun 19, 2024

Configuration:

PDF.js version: 4.3.136
Angular 17
tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "resolveJsonModule": true,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2020", "dom"],
    "types": ["jest", "node", "hammerjs", "lodash-es"],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": false,
    "noImplicitThis": false,
    "useDefineForClassFields": false
  },
  "exclude": ["node_modules"],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Steps to reproduce the problem:

Create a standalone component
Import for example PDFViewer from pdfjs-dist/types/web/pdf_viewer

What is the expected behavior?
Type is used and project builds

What went wrong?
Module not found: Error: Can't resolve 'pdfjs-dist/types/web/pdf_viewer' in 'path/to/standalone.component'

Edit:
In version 3.8.162 the import was import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer';
with node_modules\pdfjs-dist\web\pdf_viewer.d.ts only containing the export of the types
export * from "../types/web/pdf_viewer.component";
This was working for me.

Similar discussion: #17989

Edit2:
I was able to find some clues by adding "traceResolution": true to the compilerOptions in tsconfig.json

======== Resolving module 'pdfjs-dist' from '<project-path>/src/app/_shared/components/pdf-viewer/pdf-toolbar/pdf-edit-toolbar/pdf-edit-toolbar.component.ts'. ========
Explicitly specified module resolution kind: 'Node10'.
'baseUrl' option is set to '<project-path>/src', using this value to resolve non-relative module name 'pdfjs-dist'.
Resolving module name 'pdfjs-dist' relative to base url '<project-path>/src' - '<project-path>/src/pdfjs-dist'.
Loading module as file / folder, candidate module location '<project-path>/src/pdfjs-dist', target file types: TypeScript, Declaration.
File '<project-path>/src/pdfjs-dist.ts' does not exist.
File '<project-path>/src/pdfjs-dist.tsx' does not exist.
File '<project-path>/src/pdfjs-dist.d.ts' does not exist.
Directory '<project-path>/src/pdfjs-dist' does not exist, skipping all lookups in it.
Loading module 'pdfjs-dist' from 'node_modules' folder, target file types: TypeScript, Declaration.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/pdf-toolbar/pdf-edit-toolbar/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/pdf-toolbar/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/node_modules' does not exist, skipping all lookups in it.
Found 'package.json' at '<project-path>/node_modules/pdfjs-dist/package.json'.
File '<project-path>/node_modules/pdfjs-dist.ts' does not exist.
File '<project-path>/node_modules/pdfjs-dist.tsx' does not exist.
File '<project-path>/node_modules/pdfjs-dist.d.ts' does not exist.
'package.json' does not have a 'typesVersions' field.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'types/src/pdf.d.ts' that references '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts'.
File '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts' exists - use it as a name resolution result.
Resolving real path for '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts', result '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts'.
======== Module name 'pdfjs-dist' was successfully resolved to '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts' with Package ID 'pdfjs-dist/types/src/pdf.d.ts@4.3.136'. ========

======== Resolving module 'pdfjs-dist' from '<project-path>/src/app/_shared/components/pdf-viewer/pdf-viewer.component.ts'. ========
Explicitly specified module resolution kind: 'Node10'.
'baseUrl' option is set to '<project-path>/src', using this value to resolve non-relative module name 'pdfjs-dist'.
Resolving module name 'pdfjs-dist' relative to base url '<project-path>/src' - '<project-path>/src/pdfjs-dist'.
Loading module as file / folder, candidate module location '<project-path>/src/pdfjs-dist', target file types: TypeScript, Declaration.
File '<project-path>/src/pdfjs-dist.ts' does not exist.
File '<project-path>/src/pdfjs-dist.tsx' does not exist.
File '<project-path>/src/pdfjs-dist.d.ts' does not exist.
Directory '<project-path>/src/pdfjs-dist' does not exist, skipping all lookups in it.
Loading module 'pdfjs-dist' from 'node_modules' folder, target file types: TypeScript, Declaration.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Resolution for module 'pdfjs-dist' was found in cache from location '<project-path>/src/app/_shared/components/pdf-viewer'.
======== Module name 'pdfjs-dist' was successfully resolved to '<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts' with Package ID 'pdfjs-dist/types/src/pdf.d.ts@4.3.136'. ========

======== Resolving module 'pdfjs-dist/web/types/pdf_find_controller' from '<project-path>/src/app/_shared/components/pdf-viewer/pdf-viewer.component.ts'. ========
Explicitly specified module resolution kind: 'Node10'.
'baseUrl' option is set to '<project-path>/src', using this value to resolve non-relative module name 'pdfjs-dist/web/types/pdf_find_controller'.
Resolving module name 'pdfjs-dist/web/types/pdf_find_controller' relative to base url '<project-path>/src' - '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller'.
Loading module as file / folder, candidate module location '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller', target file types: TypeScript, Declaration.
Loading module 'pdfjs-dist/web/types/pdf_find_controller' from 'node_modules' folder, target file types: TypeScript, Declaration.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/node_modules' does not exist, skipping all lookups in it.
File '<project-path>/node_modules/pdfjs-dist/package.json' exists according to earlier cached lookups.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'types/src/pdf.d.ts' that references '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts'.
Loading module as file / folder, candidate module location '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts', target file types: TypeScript, Declaration.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts' has a '.d.ts' extension - stripping it.
Directory 'C:/Development/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/node_modules' does not exist, skipping all lookups in it.
'baseUrl' option is set to '<project-path>/src', using this value to resolve non-relative module name 'pdfjs-dist/web/types/pdf_find_controller'.
Resolving module name 'pdfjs-dist/web/types/pdf_find_controller' relative to base url '<project-path>/src' - '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller'.
Loading module as file / folder, candidate module location '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller', target file types: JavaScript, JSON.
Loading module 'pdfjs-dist/web/types/pdf_find_controller' from 'node_modules' folder, target file types: JavaScript, JSON.
Searching all ancestor node_modules directories for fallback extensions: JavaScript, JSON.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/node_modules' does not exist, skipping all lookups in it.
File '<project-path>/node_modules/pdfjs-dist/package.json' exists according to earlier cached lookups.
'package.json' has 'main' field 'build/pdf.mjs' that references '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs'.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs' has a '.mjs' extension - stripping it.
Loading module as file / folder, candidate module location '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs', target file types: JavaScript, JSON.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs' has a '.mjs' extension - stripping it.
Directory 'C:/Development/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/node_modules' does not exist, skipping all lookups in it.
Resolution of non-relative name failed; trying with '--moduleResolution bundler' to see if project may need configuration update.
'baseUrl' option is set to '<project-path>/src', using this value to resolve non-relative module name 'pdfjs-dist/web/types/pdf_find_controller'.
Resolving module name 'pdfjs-dist/web/types/pdf_find_controller' relative to base url '<project-path>/src' - '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller'.
Loading module as file / folder, candidate module location '<project-path>/src/pdfjs-dist/web/types/pdf_find_controller', target file types: TypeScript, Declaration.
Loading module 'pdfjs-dist/web/types/pdf_find_controller' from 'node_modules' folder, target file types: TypeScript, Declaration.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Directory '<project-path>/src/app/_shared/components/pdf-viewer/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/components/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/_shared/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/app/node_modules' does not exist, skipping all lookups in it.
Directory '<project-path>/src/node_modules' does not exist, skipping all lookups in it.
File '<project-path>/node_modules/pdfjs-dist/package.json' exists according to earlier cached lookups.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'types/src/pdf.d.ts' that references '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts'.
Loading module as file / folder, candidate module location '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts', target file types: TypeScript, Declaration.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts' has a '.d.ts' extension - stripping it.
Directory 'C:/Development/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/node_modules' does not exist, skipping all lookups in it.
======== Module name 'pdfjs-dist/web/types/pdf_find_controller' was not resolved. ========

With the interessting parts being:

'package.json' has 'types' field 'types/src/pdf.d.ts' that references '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts'.
Loading module as file / folder, candidate module location '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts', target file types: TypeScript, Declaration.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/types/src/pdf.d.ts' has a '.d.ts' extension - stripping it.

after failing for types TypeScript / Declaration it tries with JavaScript / JSON, but fails again

'package.json' has 'main' field 'build/pdf.mjs' that references '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs'.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs' has a '.mjs' extension - stripping it.
Loading module as file / folder, candidate module location '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs', target file types: JavaScript, JSON.
File name '<project-path>/node_modules/pdfjs-dist/web/types/pdf_find_controller/build/pdf.mjs' has a '.mjs' extension - stripping it.

Answered by Tucaen

Aug 8, 2024

I managed to get the project to compile by changing the imports as follows:
Old:

import { AnnotationEditorType, GlobalWorkerOptions, PDFDocumentProxy, PDFPageProxy, PageViewport, getDocument } from 'pdfjs-dist';
import { OnProgressParameters } from 'pdfjs-dist/types/src/display/api';
import { PDFViewerOptions } from 'pdfjs-dist/types/web/pdf_viewer';
import { LinkTarget, PDFFindController, PDFLinkService, PDFSinglePageViewer, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';

New:

import { AnnotationEditorType, GlobalWorkerOptions, OnProgressParameters, PDFDocumentProxy, PDFPageProxy, PageViewport, getDocument } from 'pdfjs-dist';
import { PDFViewerOptions } from 'pdfjs-dist/types/web/pdf_vie…

View full answer

Tucaen · 2024-06-21T07:41:53Z

Tucaen
Jun 21, 2024
Author

Adding import{ PDFViewer, PDFViewerOptions } from "../web/pdf_viewer.js"; and adding them to the export (export { AbortException... PDFViewer, PDFViewerOptions, ...}) manually to types/src/pdf.d.ts changes the error to

Error: export 'PDFViewer' (imported as 'PDFViewer') was not found in 'pdfjs-dist' (possible exports: AbortException, AnnotationEditorLayer, AnnotationEditorParamsType, AnnotationEditorType, AnnotationEditorUIManager, AnnotationLayer, AnnotationMode, CMapCompressionType, ColorPicker, DOMSVGFactory, DrawLayer, FeatureTest, GlobalWorkerOptions, ImageKind, InvalidPDFException, MissingPDFException, OPS, Outliner, PDFDataRangeTransport, PDFDateString, PDFWorker, PasswordResponses, PermissionFlag, PixelsPerInch, RenderingCancelledException, TextLayer, UnexpectedResponseException, Util, VerbosityLevel, XfaLayer, build, createValidAbsoluteUrl, fetchData, getDocument, getFilenameFromUrl, getPdfFilenameFromUrl, getXfaPageViewport, isDataScheme, isPdfFile, noContextMenu, normalizeUnicode, renderTextLayer, setLayerDimensions, shadow, updateTextLayer, version)

But the module was successfully loaded

======== Resolving module '../web/pdf_viewer.js' from 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/src/pdf.d.ts'. ========
Explicitly specified module resolution kind: 'Node10'.
Loading module as file / folder, candidate module location 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.js', target file types: TypeScript, Declaration.
File name 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.js' has a '.js' extension - stripping it.
File 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.ts' does not exist.
File 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.tsx' does not exist.
File 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.d.ts' exists - use it as a name resolution result.
File 'C:/Development/<project-path>/node_modules/pdfjs-dist/package.json' exists according to earlier cached lookups.
======== Module name '../web/pdf_viewer.js' was successfully resolved to 'C:/Development/<project-path>/node_modules/pdfjs-dist/types/web/pdf_viewer.d.ts' with Package ID 'pdfjs-dist/types/web/pdf_viewer.d.ts@4.3.136'. ========

0 replies

Tucaen · 2024-07-04T12:07:12Z

Tucaen
Jul 4, 2024
Author

Problem remains the same with version 4.4.168

0 replies

Tucaen · 2024-08-01T07:35:54Z

Tucaen
Aug 1, 2024
Author

Problem remains the same with version 4.5.136

0 replies

Tucaen · 2024-08-08T08:20:49Z

Tucaen
Aug 8, 2024
Author

I managed to get the project to compile by changing the imports as follows:
Old:

import { AnnotationEditorType, GlobalWorkerOptions, PDFDocumentProxy, PDFPageProxy, PageViewport, getDocument } from 'pdfjs-dist';
import { OnProgressParameters } from 'pdfjs-dist/types/src/display/api';
import { PDFViewerOptions } from 'pdfjs-dist/types/web/pdf_viewer';
import { LinkTarget, PDFFindController, PDFLinkService, PDFSinglePageViewer, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';

New:

import { AnnotationEditorType, GlobalWorkerOptions, OnProgressParameters, PDFDocumentProxy, PDFPageProxy, PageViewport, getDocument } from 'pdfjs-dist';
import { PDFViewerOptions } from 'pdfjs-dist/types/web/pdf_viewer';
import * as pdfJs from 'pdfjs-dist/web/pdf_viewer.mjs';

But unfortunately it still doesn't work at runtime, because the GlobalWorker can not be loaded

Error: Setting up fake worker failed: "Failed to fetch dynamically imported module: http://localhost:4200/assets/pdf-js/pdf.worker.min.js".
    at :4200/vendor.js:260331:36 [<root>]
    at :4200/polyfills.js:9142:28 [<root>]
    at :4200/drainMicroTaskQueue (http://localhost:4200/polyfills.js:8480:23) [<root>]

0 replies

Tucaen · 2024-08-08T08:33:48Z

Tucaen
Aug 8, 2024
Author

Solution to this (GlobalWorker can not be loaded) is to adjust the angular.json.
The worker filename changed from .js to .mjs

angular.json > [project-name] > architect > build > options > assets

{
                "glob": "pdf.worker.min.mjs",
                "input": "node_modules/pdfjs-dist/build/",
                "output": "assets/pdf-js/"
              }

So with all those changes it acutally seems to work again!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to import types from pdfjs-dist/types/web/ in Angular 17? #18295

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to import types from pdfjs-dist/types/web/ in Angular 17? #18295

Tucaen Jun 19, 2024

Replies: 5 comments

Tucaen Jun 21, 2024 Author

Tucaen Jul 4, 2024 Author

Tucaen Aug 1, 2024 Author

Tucaen Aug 8, 2024 Author

Tucaen Aug 8, 2024 Author

Tucaen
Jun 19, 2024

Tucaen
Jun 21, 2024
Author

Tucaen
Jul 4, 2024
Author

Tucaen
Aug 1, 2024
Author

Tucaen
Aug 8, 2024
Author

Tucaen
Aug 8, 2024
Author