Not able to use ng-bootstrap with angular 9

user_5761196 0
Viewed 4619

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

carousel angular9 ng-bootstrap
2 Answers

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!

user_57158520

whenever such installation is done while your project is already served;

  1. Go to to the CLI
  2. Press CTRL + C
  3. Press Y
  4. Re-serve your application again
  5. The error should disappear this time
user_106327380
Related