PdfViewer version update 18.2.54 to 20.4.49

Hi, I am updating the pdfViewer driver as I need to be able to view digital signatures and I see that this is a functionality that was added in version 20.4.49. The problem is that when I upgrade to version 20 I get the following errors:

ERROR in /node_modules/@syncfusion/ej2-angular-pdfviewer/fesm2015/syncfusion-ej2-angular-pdfviewer.mjs 185:26-48

Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)


I get more, but they are all the same style. I'm with a version of angular 9, but I've seen that in your documentation they would be compatible.


I put the dependencies versions of the other dependencies in case it can influence and the configuration of ts

Package.json

... 
"dependencies": {
    "@angular-devkit/build-angular": "0.901.0",
    "@angular-material-extensions/fab-menu": "^3.0.0",
    "@angular/animations": "^9.1.0",
    "@angular/cdk": "^9.2.4",
    "@angular/cli": "9.1.0",
    "@angular/common": "^9.1.0",
    "@angular/compiler": "^9.1.0",
    "@angular/compiler-cli": "^9.1.0",
    "@angular/core": "^9.1.0",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^9.1.0",
    "@angular/language-service": "^9.1.0",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@angular/router": "^9.1.0",
    "@angular/service-worker": "^9.1.0",
    "@boldreports/angular-reporting-components": "^2.2.32",
    "@boldreports/javascript-reporting-controls": "^2.3.26",
    "@boldreports/types": "^2.3.26",
    "@compodoc/compodoc": "^1.1.11",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@nestjs-modules/mailer": "^1.5.1",
    "@nestjs/bull": "^0.3.1",
    "@nestjs/common": "^7.4.4",
    "@nestjs/config": "^0.5.0",
    "@nestjs/core": "^7.4.4",
    "@nestjs/jwt": "^7.1.0",
    "@nestjs/mapped-types": "^1.0.0",
    "@nestjs/mongoose": "^7.0.2",
    "@nestjs/passport": "^7.1.0",
    "@nestjs/platform-express": "^7.4.4",
    "@nestjs/platform-socket.io": "^7.4.4",
    "@nestjs/schematics": "^7.2.2",
    "@nestjs/swagger": "^4.6.0",
    "@nestjs/typeorm": "^7.1.5",
    "@nestjs/websockets": "^7.4.4",
    "@ng-idle/core": "^10.0.0-beta.1",
    "@ng-idle/keepalive": "^10.0.0-beta.1",
    "@nrwl/angular": "^9.3.0",
    "@pdftron/webviewer": "^7.0.1",
    "@syncfusion/ej2-angular-barcode-generator": "^18.2.54",
    "@syncfusion/ej2-angular-buttons": "^18.2.54",
    "@syncfusion/ej2-angular-calendars": "^18.2.54",
    "@syncfusion/ej2-angular-charts": "^18.2.54",
    "@syncfusion/ej2-angular-dropdowns": "^18.2.54",
    "@syncfusion/ej2-angular-filemanager": "^18.2.54",
    "@syncfusion/ej2-angular-grids": "^18.4.49",
    "@syncfusion/ej2-angular-inputs": "^18.4.47",
    "@syncfusion/ej2-angular-layouts": "^19.1.63",
    "@syncfusion/ej2-angular-navigations": "^18.2.54",
    "@syncfusion/ej2-angular-pdfviewer": "^20.4.49",
    "@syncfusion/ej2-angular-popups": "^18.2.54",
    "@syncfusion/ej2-angular-schedule": "^18.2.54",
    "@syncfusion/ej2-angular-splitbuttons": "^18.2.54",
    "@syncfusion/ej2-angular-treegrid": "^18.2.54",
    "@syncfusion/ej2-layouts": "^18.2.54",
    "@types/lodash": "^4.14.159",
    "@types/mongoose": "^5.7.21",
    "@types/web-push": "^3.3.0",
    "@zxing/ngx-scanner": "^2.0.0",
...

tsconfig.json
...
compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
...

Can you help me?


5 Replies 1 reply marked as answer

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team May 6, 2024 05:26 PM UTC

Hi Alberto,

Please refer to the documentation below for compatible Angular versions with Syncfusion Angular components.

 

https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-supported-versions

 

Note: If you are using PDF Viewer version 20.4.49, you need to use Angular version 15.



AV Alberto Vázquez May 7, 2024 06:38 AM UTC

But according to what you tell me, angular 9 is compatible with 17.4.51 and above... Without going any further, I have the grid in a version 19 installed that according to your criteria should work in angular 13...


Image_2813_1715063816098



VV Visvesvar Venkatesan Syncfusion Team May 9, 2024 05:17 PM UTC

Hi Alberto,


We recommend using angular version 15. Did you face any issue in this angular version.




AV Alberto Vázquez May 10, 2024 08:05 AM UTC

Ahora mismo no puedo permitirme una actualización a angular 15, es una aplicación en producción y genera muchas otras incompatibilidades con otras dependencias, solo necesitaba actualizar la versión del visor de pdf.



CK Chinnamunia Karthik Chinna Thambi Syncfusion Team May 16, 2024 01:32 PM UTC

Hi Alberto,

For Angular version below 12, you need to use the ngcc tagged packages of the Syncfusion Angular components. To install the package use the below command,

 

Add @syncfusion/ej2-angular-grids@ngcc package to the application.

 

@syncfusion/ej2-angular-pdfviewer:"20.4.49-ngcc"

 
Documentation: https://ej2.syncfusion.com/angular/documentation/installation-and-upgrade/installation#angular-compatibility-compiled-package-ngcc


Additionally, please use the same package version for all Syncfusion Angular components.

 

Kindly try this and If you have any concerns, please share the sample in which you are facing the issue. This will be helpful for us to analyze further and provide the details.


Marked as answer
Loader.
Up arrow icon