CODEWITHSUNDEEP
angulartypescriptangular-components
SemperCallide
SemperCallide

Reputation: 2080

Angular2 Not Recognizing component From Imported Module

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 {}

Upvotes: 15

Views: 14221

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71961

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

Upvotes: 25

Related Questions