stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
473 stars 181 forks source link

Can't import NgxExtendedPdfViewerModule in my new Angular 11 project #1343

Closed RFang1997 closed 2 years ago

RFang1997 commented 2 years ago

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

stephanrauh commented 2 years ago

Can you activate Ivy? After version 10.5 I gave in to the nudging of the Angular team and converted the library to an Ivy library. Your error messages show that you're still using the old view engine.

stephanrauh commented 2 years ago

See https://docs.angular.lat/guide/ivy for more details.

RFang1997 commented 2 years ago

Thank you for your response Stephan, I understand your point, however Ivy is the default in Angular 11. As I said I created a brand new Angular 11 project without disabling Ivy at all.

To make sure Ivy is enabled, I added "enableIvy": true in my tsconfig.json, but I still have the same errors:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "enableIvy": true
  }
}

Here is my angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Angular11Project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Angular11Project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Angular11Project:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Angular11Project:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Angular11Project:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Angular11Project:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Angular11Project:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "Angular11Project"
}

Best regards, Remi

stephanrauh commented 2 years ago

Note to myself: never neglect the documentation. :)

stephanrauh commented 2 years ago

Hm. You say it's broken in a fresh Angular 11 project? That's annoying. I trusted what Chris Kohler wrote:

"This process started with an Ivy preview in version 8 and Ivy as the default rendering engine with version 9."

stephanrauh commented 2 years ago

What a weird bug! I've managed to reproduce it, but it doesn't make sense. I'm clueless. According to the Angular 11 documentation, everything works fine, only it doesn't.

I've tried to downgrade my Angular CLI to 11.0.0 or 11.1.0. Maybe 11.2.14 is buggy. But I didn't manage to downgrade the CLI.

At the moment, the only solution I see is updating the documentation, claiming the library only supports Angular 12 and 13. But that's exactly what I don't want to do!

NoSoup4you2 commented 2 years ago

FYI I run into the exact same issue as I tried to add the viewer to my existing app which is on Angular 11.2.x and i get the same errors that it only has default entry point. I tried to install version 11 and 12 of the component since it is at the current time no option to upgrade to 13, to many changes in a few library's which will require days. I also did in my case clean installs and tried on windows and mac system with no luck. Also as an FYI i got these errors on angular@11.1.2. Is there a pre Ivy version of this component that will run on Angular 11 and if does it still support srcBase64 ?

RFang1997 commented 2 years ago

Hello,

The most recent version of the library that works with my Angular 11 project is the version 10.5.0, you should try this one.

Best regards, Remi

NoSoup4you2 commented 2 years ago

Thanks, yes I can confirm after removing the version 13 and install the 10.5 solves the compile issue and i will wait till i find time to migrate my project to > Angular 12

NoSoup4you2 commented 2 years ago

Do we know if the version 10.5 supports the srcBase64 ? Because for some reason it does not work for me, same code works in Angular 13 ad version 13

stephanrauh commented 2 years ago

Yes, of course. [base64Src] - not [srcBase64] :) - was there almost from day 1 of the project.

stephanrauh commented 2 years ago

Do you know whether it's possible to publish different variations of the same library on npm? That's a feature I know from Maven. I could publish something like 13.0.0-pre-ivy, but I'm afraid developers get confused and install the slower package because they believe it's the most current one.

If you want to compile your own copy supporting the good old View Engine, that's possible:

I know that's a cumbersome approach, but I wanted to show you there are workarounds. If it's possible to publish a dual version within the same npm repository, I'm ready to do it, but only for a limited time. Sooner or later it'll become difficult or impossible to support both Ivy and the View Engine.

RFang1997 commented 2 years ago

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

mfrieling commented 2 years ago

I have a similar problem just the other way round, but think it is related as I get the same error messages plus some more. My project is using Angular 10.2.3 and Ionic 5.x and due to some issues I wanted to update ngx-extended-pdf-viewer from 10.5. Installation works but when I build I get the mentioned errors plus the error

"@angular/compiler-cli" version 11.1.0 or greater is needed.

The app heavily depends on using compileModuleAndAllComponentsAsync() to dynamically load Markup, JS Code and Styles from a server and compile them into a module which is dynamically loaded into the app. Therefore we cannot update Angular itself from 10 to 11 or newer.

When ngx-extended-pdf-viewer causes an error saying that Angular Compiler CLI 11.1.0 or greater is needed you should not mark 11.x - 13.x as compatible with Angular < 11.

stephanrauh commented 2 years ago

Hi Marco, thanks for the hint! I'll fix the list of compatible version ASAP. I'm not sure what happened between version 10.5.0, and why the library requires version 11.1.0 of the compiler CLI. But I need to publish a version the claims to be compatible to Angular 14, anyways, so it's a good point in time to raise the minimum requirement to Angular 11.1.0.

Nonetheless, it's annoying you're stuck with an old version of the PDF viewer. I'm sorry to hear that!

Best regards, Stephan

stephanrauh commented 2 years ago

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