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