Angular 9 application stops working as soon I load ImageViewerModule

[akashmandal]

Hi,
I am working on an Angular 9 application and trying to implement this component. But as soon as I add ImageViewerModule in app.module.ts, the application stops loading.

checklist-

• added "iv-viewer": "2.0.1", "ng2-image-viewer": "^3.0.5" in package.json.
• added "node_modules/ng2-image-viewer/imageviewer.scss" in Angular.json
• added 'import { ImageViewerModule } from 'ng2-image-viewer'' in app.module.ts

As soon as I add ImageViewerModule in import section of app.module.ts, I am getting following error in browser console -

core.js:36228 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:36228)
    at core.js:36246
    at Array.forEach ()
    at registerNgModuleType (core.js:36242)
    at new NgModuleFactory$1 (core.js:36407)
    at compileNgModuleFactory__POST_R3__ (core.js:42296)
    at PlatformRef.bootstrapModule (core.js:42663)
    at Module../src/main.ts (main.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (polyfills.ts:52)
registerNgModuleType @ core.js:36228
(anonymous) @ core.js:36246
registerNgModuleType @ core.js:36242
NgModuleFactory$1 @ core.js:36407
compileNgModuleFactory__POST_R3__ @ core.js:42296
bootstrapModule @ core.js:42663
./src/main.ts @ main.ts:12
__webpack_require__ @ bootstrap:78
0 @ polyfills.ts:52
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.

note - package dependencies used

"dependencies": {
    "@angular-devkit/core": "^9.1.9",
    "@angular-devkit/schematics": "^9.1.9",
    "@angular/animations": "^9.1.11",
    "@angular/common": "^9.1.11",
    "@angular/compiler": "^9.1.11",
    "@angular/core": "^9.1.11",
    "@angular/forms": "^9.1.11",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/router": "^9.1.11",
    "@schematics/update": "^0.901.9",
    "bootstrap": "^4.5.0",
    "tslib": "^1.13.0",
    "file-saver": "^2.0.2",
    "core-js": "^3.6.5",
    "font-awesome": "^4.7.0",
    "ngx-cookie-service": "^2.4.0",
    "ngx-bootstrap": "^5.2.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.5.4",
    "zone.js": "^0.10.3",
    "iv-viewer": "2.0.1",
    "ng2-image-viewer": "^3.0.5"
  }

[akashmandal]

Hi,
I further found proper error message after enabling "aot:true" option in angular.json file .. and here is the error...

    
    ERROR in node_modules/ng2-image-viewer/index.d.ts:3:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
    
    This likely means that the library (ng2-image-viewer) which declares ImageViewerModule has not been processed correctly by ngcc,
or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
    
    3 export declare class ImageViewerModule {

[desarroyo]

same