2

I want to import some specific components from ng-bootstrap module in Angular 2.
Can I do that?

I have custom tabset created from existing ng-bootstrap component.
After importing ng-bootstrap I have getting module duplication error.

How can I handle this?

2 Answers 2

3

It is easy: just import individual modules from ng-bootstrap instead of importing the whole NgbModule. For example to only import alert-related functionality you would do:

import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap/alert/alert.module';

...

@NgModule({
  imports: [BrowserModule, NgbAlertModule.forRoot()], 
  declarations: [App]
  bootstrap: [App]
}) 
export class AppModule {}

Of course you would have to import and list all the modules that you are using but the advantage here is that you can precisely reference only things that are used in your application.

Sign up to request clarification or add additional context in comments.

1 Comment

This doesn't work anymore with ng-bootstrap 3+ - use the other answer
1

Two common mistakes done by people who are using ng-bootstrap for the first time:

  1. Include both NgbModule and individual components and get that duplication error.
  2. Miss "Module" suffix while importing most of components
    (e.g. import { NgbTabset } from ... instead of import { NgbTabsetModule } from ...)

So as the answer to your question just remove the NgbModule if you've imported that and import NgbTabsetModule instead.

Just like this:

// Remove this line -> import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbTabsetModule } from '@ng-bootstrap/ng-bootstrap';
//...
@NgModule({
  imports: [
    // ...
    NgbTabsetModule,
  ],
  declarations: [YourComponent]
})
export class YourComponent {}

P.S. Also there is no need to provide full path while importing the component as is mentioned in other answer(s). Importing from '@ng-bootstrap/ng-bootstrap' works fine.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.