Error when implementing 'ng-multiselect-dropdown' for Angular version 16

Question

I am implementing ng-multiselect-dropdown on Angular 16 project. I have installed the library with command npm i ng-multiselect-dropdown

I have imported it in app.module.ts file as well.

import {NgMultiSelectDropDownModule} from 'ng-multiselect-dropdown';

imports: [
    BrowserModule,
    ...,
    NgMultiSelectDropDownModule.forRoot()
  ]

But when I run the code i get error as below:

Error: src/app/app.module.ts:37:12 - error NG6002: 'NgMultiSelectDropDownModule' does not appear to be an NgModule class.

 37   imports: [
               ~
 38     BrowserModule,
    ~~~~~~~~~~~~~~~~~~
    This likely means that the library (ng-multiselect-dropdown) which declares NgMultiSelectDropDownModule 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.

Package.json file content below

{
  "name": "multiselectdropdown",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve": "node ./server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@pnp/common": "^1.3.6",
    "@pnp/graph": "^1.3.6",
    "@pnp/logging": "^1.3.6",
    "@pnp/odata": "^1.3.6",
    "@pnp/polyfill-ie11": "^1.0.2",
    "@pnp/sp": "^1.3.6",
    "ng-multiselect-dropdown": "^0.3.9",
    "ngx-pagination": "^6.0.3",
    "node-sass": "^8.0.0",
    "rxjs": "~7.8.0",
    "sp-pnp-js": "^3.0.10",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.0",
    "@angular/cli": "~16.0.0",
    "@angular/compiler-cli": "^16.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^20.1.4",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "sp-rest-proxy": "^3.3.5",
    "typescript": "~5.0.2"
  }
}

Any leads or help will be appreciated.

Thanks.

Answer 1

The ng-multiselect-dropdown library might not support Angular's new Ivy architecture yet. The Angular Compatibility Compiler (ngcc), which provided a way for libraries built for the old View Engine architecture to be compatible with Ivy, was removed in Angular 16.

Answer 2

i've tried this and it's work

ng update ng-multiselect-dropdown

hope that helps you