Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't import NgxExtendedPdfViewerModule in my new Angular 11 project

See original GitHub issue

Hello,

I tried to import the ngx-extended-pdf-viewer package to a brand new Angular 11 project, however I’m having issues while serving the app locally:

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 3922:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4004:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4045:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4177:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4185:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4241:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4503:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4572:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4669:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4777:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4839:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4944:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5066:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5130:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5349:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5418:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5482:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5538:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5585:6-15
Can't import the named export 'ɵɵtext' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 536:4-25
Can't import the named export 'ɵɵtextInterpolate1' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 678:4-25
Can't import the named export 'ɵɵtextInterpolate1' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 693:4-25
Can't import the named export 'ɵɵtextInterpolate1' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 1524:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 1525:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)9m

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 1526:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 1527:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 2812:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4645:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 4753:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5218:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5219:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 5669:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 9024:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 9025:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 9026:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Error: ./node_modules/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.mjs 9027:6-20
Can't import the named export 'ɵɵviewQuery' from non EcmaScript module (only default export is available)

Looks like version 11, 12 and 13 of the package does not work on Angular 11. However it seems to work fine for version 10.5.0 of the package. I also tried to add the latest version of the package for an Angular 12 and 13 project, I encountered no issues.

Here is my package.json:

{
  "name": "angular11-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "ngx-extended-pdf-viewer": "^13.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.13",
    "@angular/cli": "~11.2.14",
    "@angular/compiler-cli": "~11.2.14",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

Here is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxExtendedPdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Is it normal that I can’t use the latest version of the package in my Angular 11 project ? It is written in the documentation that the minimum required version is Angular 9.

Best regards, Remi

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
RFang1997commented, May 5, 2022

Hello Stephan,

Thank you for your time and response. Unfortunately I have no idea if it is possible to do that. For the moment I will do the same as NoSoup4you2 and stick to the version 10.5.0 for my Angular 11 project. I will upgrade the library when I migrate to Angular 12. I am just getting started on integrating your library into my project so if I have any issues, I will get back to you.

Best regards, Remi

0reactions
stephanrauhcommented, Jun 18, 2022

@mfrieling I’ve increased the minimum required version to 12. I couldn’t convince Docker to build with Angular 11. Maybe it’s possible, but I prefer to err on the safe side.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't load Module NgxExtendedPdfViewerModule · Issue #1263
Hi, When I try to load the module NgxExtendedPdfViewerModule, ... node_modules/ngx-extended-pdf-viewer/lib/document-properties/pdf-document-properties- ...
Read more >
Cant add NgxExtendedPdfViewerModule to an existing Project
There seems to be a issue with the library and Angular@11. ... import {NgxExtendedPdfViewerModule} from "ngx-extended-pdf-viewer";.
Read more >
ngx-extended-pdf-viewer - npm
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used ...
Read more >
How to Build an Angular PDF Viewer with PDF.js - PSPDFKit
Change your directory into pdf-viewer with cd pdf-viewer . Go to the project terminal and create a new Angular project: 1 ng new...
Read more >
ngx-extended-pdf-viewer
This configures your project, adds an example component and an example PDF file, so you just need to add the new <add-example-pdf-viewer> tag...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Print margin influenced by pdf viewer

Next page

Allow programmers to clear the PDF programmatically even if the user has opened it