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

Poul Kruijt · Accepted Answer · 2020-12-14T09:21:01.213

23

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

edited Dec 14 '20 at 09:21

answered Jan 23 '17 at 15:20

Poul Kruijt

69,713
12
145
149

Thank you! I knew I was missing something obvious. This is what I get for looking at tutorial examples instead of referencing the API documentation directly. – SemperCallide Jan 23 '17 at 15:27
The best tutorials and guides you find at [angular.io](https://angular.io), coincidentally also the same place where you can find the API ;) – Poul Kruijt Jan 23 '17 at 15:28
Also don't forget to add to declarations the component you are using the exported from !! – BorisD Jun 03 '22 at 18:16

Angular2 Not Recognizing component From Imported Module

1 Answers1