Unable to install version 19.7.1 with Angular project 15^

[faizaldong]

I have Angular 15 installed locally and I need to install this library so I can view my pdf file in my project. With my Angular version, I couldn't install the latest version of this library, instead, I tried to install the 19.7.1 version. This version has an Angular 13^ version which I think is compatible with the Angular 15^ version. By that, I run this command ng add ngx-extended-pdf-viewer@19.7.1

$ ng add ngx-extended-pdf-viewer@19.7.1

• Determining package manager... i Using package manager: npm
• Loading package information from registry...

and unfortunately, I got this error

× Unable to fetch package information for 'ngx-extended-pdf-viewer@19.7.1': request to https://registry.npmjs.org/ngx-extended-pdf-viewer failed, reason:`

angular version

$ ng version

      _                      _                 ____ _     ___
     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/

Angular CLI: 15.1.6
Node: 20.13.1 (Unsupported)
Package Manager: npm 10.5.2
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.6
@angular-devkit/build-angular   15.2.6
@angular-devkit/core            15.2.6
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                        4.9.5

Warning: The current version of Node (20.13.1) is not supported by Angular.

please help, thanks!

[Julian-B90]

hey, I think you were looking the wrong way. For Angular 15, version 18.1.5 would be the right choice.

You can track this here under peerDependencies https://github.com/stephanrauh/ngx-extended-pdf-viewer/blob/15c3ce39a56c9dafe8c48de0d20ba2e127698deb/projects/ngx-extended-pdf-viewer/package.json#L34

[faizaldong]

Hi @Julian-B90 thank you for the response.

After I run the command with the suggested version, I can successfully import the module. To install the library, I referred to this official document angular cli.

HTML

<ngx-extended-pdf-viewer [src]="'urlpdf.pdf'"

but I'm getting this error

Can you help address me which part I'm missing?

Appreciate your response. Thanks!

[stephanrauh]

Please run ng build and examine the dist folder. Does it contain the files mentioned in the log?

Thing is, your browser claims these JavaScript files are HTML files. This either means you've messed up your server configuration, but that's unlikely. So the next probably cause is the JavaScript files needed by ngx-extended-pdf-viewer are missing, and Angular server the index.html instead. Please check your angular.json if it contains these lines:

           "assets": [
              ...,
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "src/assets/i18n",
                "output": "/assets/locale/"
              },

[faizaldong]

in my angular.json the assets I do have the translation stuff. is it because of the glob?

[faizaldong]

I tried with the sample pdf from https://pdfobject.com/pdf/sample.pdf and it is working fine. Closed the issue for now. thanks!

[stephanrauh]

I'm puzzled. Of course I'm happy there's one issue less, but still, I wonder if you've managed to solve the issue? Or if you think it's related to a particular PDF file?