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

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

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">`

Solution

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!