Cant add NgxExtendedPdfViewerModule to an existing Project

2.6k Views Asked by At

I am trying to add ngx-extended-pdf-viewer to my existing app with no luck. My App is currently running on Angular 11 and i have Node v16.15 and npm 8.5.5 installed. When npm i ngx-extended-pdf-viewer i get a few warnings about mismatch as far as node and npm goes but it installs just fine. Then when I go and the below line into my app.module.ts file

import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';

once i run ng serve it is like Christmas and fails to compile, below are some of the errors which are all very similar. I went as far as removing ol node_modules and install from scratch with no luck. I even tried to install on my Mac System and I get the same errors. Is there any setting i am missing to make this work as i have a plain Angular 13 project where it works just fine.

Error: node_modules/ngx-extended-pdf-viewer/lib/dynamic-css/dynamic-css.component.d.ts:20:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

20     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicCssComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-extended-pdf-viewer/lib/dynamic-css/dynamic-css.component.d.ts:21:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

21     static ɵcmp: i0.ɵɵComponentDeclaration<DynamicCssComponent, "pdf-dynamic-css", never, { "zoom": "zoom"; "width": "width"; }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-extended-pdf-viewer/lib/ngx-extended-pdf-viewer-common.module.d.ts:62:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

62     static ɵfac: i0.ɵɵFactoryDeclaration<NgxExtendedPdfViewerCommonModule, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-extended-pdf-viewer/lib/ngx-extended-pdf-viewer-common.module.d.ts:63:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

63     static ɵmod: i0.ɵɵNgModuleDeclaration<NgxExtendedPdfViewerCommonModule, [typeof i1.DynamicCssComponent, typeof i2.PdfZoomDropdownComponent, typeof i3.PdfContextMenuComponent, typeof i4.PdfPresentationModeComponent, typeof i5.PdfOpenFileComponent, typeof i6.PdfPrintComponent, typeof i7.PdfDownloadComponent, typeof i8.PdfBookmarkComponent, typeof i9.PdfZoomToolbarComponent, typeof i10.PdfPagingAreaComponent, typeof i11.PdfFindbarComponent, typeof i12.PdfSidebarComponent, typeof i13.PdfHandToolComponent, typeof i14.PdfSelectToolComponent, typeof i15.PdfSecondaryToolbarComponent, typeof i16.PdfSearchInputFieldComponent, typeof i17.PdfFindPreviousComponent, typeof i18.PdfFindNextComponent, typeof i19.PdfFindInputAreaComponent, typeof i20.PdfFindbarOptionsTwoContainerComponent, typeof i21.PdfFindbarOptionsOneContainerComponent, typeof i22.PdfFindMatchCaseComponent, typeof i23.PdfFindHighlightAllComponent, typeof i24.PdfFindEntireWordComponent, typeof i25.PdfFindFuzzilyComponent, typeof i26.PdfFindMultipleSearchTextsComponent, typeof i27.PdfFindIgnoreAccentsComponent, typeof i28.PdfFindbarOptionsThreeContainerComponent, typeof i29.PdfFindResultsCountComponent, typeof i30.PdfFindbarMessageContainerComponent, typeof i31.PdfFindRangeComponent, typeof i32.PdfFindCurrentPageOnlyComponent, typeof i33.PdfToolbarComponent, typeof i34.PdfFindButtonComponent, typeof i35.PdfToggleSidebarComponent, typeof i36.PdfToggleSecondaryToolbarComponent, typeof i37.PdfLastPageComponent, typeof i38.PdfFirstPageComponent, typeof i39.PdfNextPageComponent, typeof i40.PdfPreviousPageComponent, typeof i41.PdfPageNumberComponent, typeof i42.PdfRotatePageComponent, typeof i43.PdfZoomInComponent, typeof i44.PdfZoomOutComponent, typeof i45.PdfDummyComponentsComponent, typeof i46.PdfSidebarContentComponent, typeof i47.PdfSidebarToolbarComponent, typeof i48.PdfOriginalComponent, typeof i49.PdfDarkThemeComponent, typeof i50.PdfLightThemeComponent, typeof i51.TranslatePipe, typeof i52.PdfAcroformDefaultThemeComponent, typeof i53.PdfAcroformDarkThemeComponent, typeof i54.PdfDocumentPropertiesDialogComponent, typeof i55.PdfPasswordDialogComponent, typeof i56.PdfPreparePrintingDialogComponent, typeof i57.PdfErrorMessageComponent], [typeof i58.CommonModule, typeof i59.FormsModule], [typeof i2.PdfZoomDropdownComponent, typeof i3.PdfContextMenuComponent, typeof i4.PdfPresentationModeComponent, typeof i5.PdfOpenFileComponent, typeof i6.PdfPrintComponent, typeof i7.PdfDownloadComponent, typeof i8.PdfBookmarkComponent, typeof i9.PdfZoomToolbarComponent, typeof i10.PdfPagingAreaComponent, typeof i11.PdfFindbarComponent, typeof i12.PdfSidebarComponent, typeof i46.PdfSidebarContentComponent, typeof i47.PdfSidebarToolbarComponent, typeof i15.PdfSecondaryToolbarComponent, typeof i16.PdfSearchInputFieldComponent, typeof i17.PdfFindPreviousComponent, typeof i18.PdfFindNextComponent, typeof i19.PdfFindInputAreaComponent, typeof i20.PdfFindbarOptionsTwoContainerComponent, typeof i21.PdfFindbarOptionsOneContainerComponent, typeof i22.PdfFindMatchCaseComponent, typeof i23.PdfFindHighlightAllComponent, typeof i24.PdfFindEntireWordComponent, typeof i26.PdfFindMultipleSearchTextsComponent, typeof i27.PdfFindIgnoreAccentsComponent, typeof i28.PdfFindbarOptionsThreeContainerComponent, typeof i29.PdfFindResultsCountComponent, typeof i30.PdfFindbarMessageContainerComponent, typeof i31.PdfFindRangeComponent, typeof i32.PdfFindCurrentPageOnlyComponent, typeof i13.PdfHandToolComponent, typeof i42.PdfRotatePageComponent, typeof i14.PdfSelectToolComponent, typeof i33.PdfToolbarComponent, typeof i34.PdfFindButtonComponent, typeof i35.PdfToggleSidebarComponent, typeof i36.PdfToggleSecondaryToolbarComponent, typeof i37.PdfLastPageComponent, typeof i38.PdfFirstPageComponent, typeof i39.PdfNextPageComponent, typeof i40.PdfPreviousPageComponent, typeof i41.PdfPageNumberComponent, typeof i43.PdfZoomInComponent, typeof i44.PdfZoomOutComponent, typeof i48.PdfOriginalComponent, typeof i49.PdfDarkThemeComponent, typeof i50.PdfLightThemeComponent, typeof i51.TranslatePipe, typeof i1.DynamicCssComponent, typeof i45.PdfDummyComponentsComponent, typeof i52.PdfAcroformDefaultThemeComponent, typeof i53.PdfAcroformDarkThemeComponent, typeof i54.PdfDocumentPropertiesDialogComponent, typeof i55.PdfPasswordDialogComponent, typeof i56.PdfPreparePrintingDialogComponent, typeof i57.PdfErrorMessageComponent]>;
                       ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-extended-pdf-viewer/lib/ngx-extended-pdf-viewer-common.module.d.ts:64:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

64     static ɵinj: i0.ɵɵInjectorDeclaration<NgxExtendedPdfViewerCommonModule>;
                       ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/ngx-extended-pdf-viewer/lib/ngx-extended-pdf-viewer-server.component.d.ts:196:21 - error TS2694: Namespace '"C:/Users/admin/Documents/GitHub/Angular-7-CRM/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

196     static ɵfac: i0.ɵɵFactoryDeclaration<NgxExtendedPdfViewerServerComponent, never>;
                    ~~~~~~~~~~~~~~~~~~~~ 
2

There are 2 best solutions below

0
On

There seems to be a issue with the library and Angular@11. The fix for now is to downgrade the code of library to 10.5 which worked for me.

Link to GitHub Issue

0
On

Revert nodeJS to version 14

Then

npm i ngx-extended-pdf-viewer

Then in app.module

import {NgxExtendedPdfViewerModule} from "ngx-extended-pdf-viewer";