Angular2 Not Recognizing component From Imported Module

Question

I'm playing around with Angular2, and trying to have one module (BreadcrumbDemoModule) import the component of another (BreadcrumbModule).

Currently, BreadcrumbModule contains only one component: ng2-breadcrumb. However when I try to use this componentin BreadcrumbDemoModule, I get the error message:

'ng2-breadcrumb' is not a known element.

I think I must be missing a line somewhere, and was hoping someone could point out to me what it is that I'm doing wrong.

Thank you very much in advance!

Files for BreadcrumbModule

breadcrumb.component.html:

THIS IS A BREADCRUMB TEST

breadcrumb.component.ts:

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

@Component({
  selector: 'ng2-breadcrumb',
  template: require('./breadcrumb.component.html')
})
export class BreadcrumbComponent {}

components/breadcrumb/index.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbComponent } from './breadcrumb.component';

@NgModule({
  imports: [
    BrowserModule //for later use
  ],
  declarations: [
    BreadcrumbComponent
  ]
})
export class BreadcrumbModule {}

Files for BreadcrumbDemoModule

breadcrumb-demo.component.html:

<ng2-breadcrumb></ng2-breadcrumb>

breadcrumb-demo.component.ts:

import { Component } from '@angular/core';
import { BreadcrumbModule } from './../index';

@Component({
  selector: 'ng2-breadcrumb-demo',
  template: require('./breadcrumb-demo.component.html')
})
export class BreadcrumbDemoComponent {}

components/breadcrumb/demo/index.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BreadcrumbModule } from './../index';
import { BreadcrumbDemoComponent } from './breadcrumb-demo.component';

@NgModule({
  imports: [
    BreadcrumbModule,
    BrowserModule,
  ],
  declarations: [
    BreadcrumbDemoComponent
  ]
})
export class BreadcrumbDemoModule {}

Answer 1

You have to add the BreadcrumbComponent to the exports array, and only import the CommonModule. You can only import the BrowserModule once in your app (usually at the bootstrap module):

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BreadcrumbComponent
  ],
  exports: [
    BreadcrumbComponent
  ]
})
export class BreadcrumbModule {}

Things inside the declarations array are components/directives/pipes used within the module itself. If you want to expose these to other modules importing your module, then they should be added to the exports array