Not able to use ng-bootstrap with angular 9

Question

this is my appModule, i am using carousel of ng-boostsrap

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component'; 
import { NgbModule, NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
   NgbModule,
    NgbCarousel   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and it gives the following error whenever i add any ng-bootstrap component, here i added carousel.

ERROR in node_modules/@ng-bootstrap/ng-bootstrap/carousel/carousel.d.ts:24: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 (@ng-bootstrap/ng-bootstrap) which declares NgbCarousel 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.

    24 export declare class NgbCarousel implements AfterContentChecked, AfterContentInit, OnDestroy {
                            ~~~~~~~~~~~

I have also tried by adding angular localise

Thanks in advance

Answer 1

The error you are getting is because you added in your imports NgbModule together with NgbCarousel. However you don't need NgbCarousel since it is already included in NgbModule causing it to give you this error.

What you need to do is to remove NgbCarousel from your imports and use only NgbModule.

Like so:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,  
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Good Luck!