ngb-carousel Not Recognised

Bug description:

'ngb-carousel' is not a known element:
1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngb-carousel>

My package.json

...
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.8",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

carousel.component.ts:

import {Component} from '@angular/core';

@Component({
  selector: 'img-carousel',
  templateUrl: './img-carousel.component.html',
  styleUrls: ['./img-carousel.component.scss']
})
export class ImgCarouselComponent {
}

example.component.html:

<ngb-carousel>
    <template ngbSlide>
        <img src="http://placekitten.com/g/900/500" alt="Random first slide">
        <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </template>
    <template ngbSlide>
        <img src="http://placekitten.com/g/900/500" alt="Random second slide">
        <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </template>
    <template ngbSlide>
        <img src="http://placekitten.com/g/900/500" alt="Random third slide">
        <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
    </template>
</ngb-carousel>

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.0.1

ng-bootstrap: @latest

Bootstrap: 3.0.0

The setup (as it is in the documentation) doesn’t work with the default angular-cli setup. It should work with simple npm install with webkit as well I suppose… Since I have all the imports/references and met the dependencies, still unknown element.

[pkozlowski-opensource]

You are missing NgbModule.forRoot() somewhere in your module imports, check: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/README.md#installation

Here is a sample plunk you can use to compare with your setup: http://plnkr.co/edit/Oj470mbQJpFigZjeIeLu?p=preview

[pkozlowski-opensource]

I’ve included the NgbModule.forRoot() successfully. The selector is not recognised. Could this be angular-cli issue?

I don’t think so. I think that you are not adding NgbModule in all modules where you are using ng-bootstrap directives. Share code for the module where your ImgCarouselComponent component is defined.