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-14 09:21:01Z

25

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, 2020 at 9:21

answered Jan 23, 2017 at 15:20

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SemperCallide Over a year ago

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.

Poul Kruijt Over a year ago

The best tutorials and guides you find at angular.io, coincidentally also the same place where you can find the API ;)

BorisD Over a year ago

Also don't forget to add to declarations the component you are using the exported from !!

Collectives™ on Stack Overflow

Angular2 Not Recognizing component From Imported Module

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related