'tab' is not a known element errors when adding ng2-bootstrap to angular2-seed

angular ng2-bootstrap
Daniel Crisp picture Daniel Crisp · Sep 20, 2016 · Viewed 16.4k times · Source

I am trying to add ng2-bootstrap into a fresh clone of the angular2-seed project, but I keep getting the following error (or similar):

Unhandled Promise rejection: Template parse errors: 'tab' is not a known element

I have followed the instructions here and tried several variations, but it just doesn't want to work. I have it working in other projects that use different versions of angular2-seed, so perhaps something has changed that isn't documented in their wiki yet.

I have created a repo demonstrating my problem: https://github.com/danielcrisp/angular2-seed

As I said it is a fresh clone of angular2-seed, with the following changes:

$ npm install ng2-bootstrap --save

Then update the config:

this.SYSTEM_CONFIG_DEV.paths['ng2-bootstrap'] =
  `${this.APP_BASE}node_modules/ng2-bootstrap/ng2-bootstrap.js`;

this.SYSTEM_BUILDER_CONFIG.packages['ng2-bootstrap'] = {
    main: 'ng2-bootstrap.js',
    defaultExtension : 'js'
};

Import Ng2BootstrapModule into the NgModule.

And then I added some tabs to test.

<tabset>
  <tab>1</tab>
  <tab>2</tab>
</tabset>

If I remove the tabs from the HTML I get no errors. I also get errors if I try other ng2-bootstrap components, e.g. 

<button type="button" class="btn btn-primary" [(ngModel)]="singleModel" btnCheckbox btnCheckboxTrue="1" btnCheckboxFalse="0">`

Answer

Daniel Crisp picture Daniel Crisp · Sep 20, 2016

It turns out that I needed to include Ng2BootstrapModule into every sub-NgModule that uses it, rather than just the main root NgModule.

Importing Ng2BootstrapModule into the home.module.ts did the trick.

Thanks to @mgechev for the answer!

Related questions

Add custom button in actions column in ng2-smart-table in Angular 2

In an ng2-smart-table in Angular 2 I want to add a new button in the actions column and by clicking on this button it will route to another page. This code has the add, edit, and delete buttons. I tried …

Read More
How to implement Modal Dialog in Angular 2 and above

I am a newbie to angular. I have used bootstrap modal using the package ng2-bootstrap. My View file is <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="…

Read More
Angular 2 unit testing - @ViewChild is undefined

I am writing an Angular 2 unit test. I have a @ViewChild subcomponent that I need to recognize after the component initializes. In this case it's a Timepicker component from the ng2-bootstrap library, though the specifics shouldn't matter. After I …

Read More