I am using angular 9 (Ivy complier) and I need to display the pdf file in preview. For this i just want to use the ngx-doc-viewer but it showing error

Question

ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 200:181-193 Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 201:143-155 Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 205:30-42 Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 131:18-27 Can't import the named export 'Component' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 128:153-168 Can't import the named export 'DomSanitizer' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 172:58-73 Can't import the named export 'DomSanitizer' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 14:26-38 Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 175:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 177:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 179:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 181:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 183:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 185:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 187:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 189:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 191:22-27 Can't import the named export 'Input' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 129:2588-2595 Can't import the named export 'NgIf' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 203:18-26 Can't import the named export 'NgModule' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 128:181-190 Can't import the named export 'NgZone' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 172:85-94 Can't import the named export 'NgZone' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 173:22-28 Can't import the named export 'Output' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 193:22-34 Can't import the named export 'ViewChildren' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 48:15-24 Can't import the named export '__awaiter' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 108:41-54 Can't import the named export 'getDocxToHtml' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 69:36-52 Can't import the named export 'getViewerDetails' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 75:36-52 Can't import the named export 'getViewerDetails' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 114:39-62 Can't import the named export 'googleCheckSubscription' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 120:22-36 Can't import the named export 'iframeIsLoaded' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 73:20-31 Can't import the named export 'isLocalFile' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 74:35-50 Can't import the named export 'replaceLocalUrl' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 128:203-221 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 199:149-167 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 130:0-27 Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 202:0-27 Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 129:29-52 Can't import the named export 'ɵɵngDeclareComponent' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 128:29-50 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 199:26-47 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 201:26-48 Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available) ERROR in ./node_modules/ngx-doc-viewer/fesm2015/ngx-doc-viewer.mjs 200:26-48 Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)

Answer 1

I ran into this issue. I solved it by downgrading the ngx-doc-viewer version because my tslib had a lower version than what is required. Check to see if the ngx-doc-viewer version is compatible with your tslib version. Also check if you have the dependency docviewhelper. You can take a look at your package-lock.json for example to see what is required.

"ngx-doc-viewer": {
  "version": "2.1.2",
  "resolved": "https://registry.npmjs.org/ngx-doc-viewer/-/ngx-doc-viewer-2.1.2.tgz",
  "integrity": "sha512-TuWSWGl1sCGe9w3oSiL93DeOr4JdCKb79ImnFv696AHi81zNFzwZs6RRV95nusoh6YTmBORra7D2oDDh6yeXWw==",
  "requires": {
    "docviewhelper": ">= 0.0.1",
    "tslib": "^2.3.0"
  },

Another solution could be to remove the "^" in ngx-doc-viewer version in package.json. So do "ngx-doc-viewer": "2.1.2" instead of "ngx-doc-viewer": "^2.1.2".