Angular 2 can't find a component declared in my feature module

Question

I'm having a tough time getting modules to work in Angular 2. I have created a plunk that demonstrates the problem. In the plunk, you'll see I have app.module. This module imports app-common.module, which contains a component to display page headers. The template for the top level component, app.component contains the selector for this component. Here's app.common.module:

@NgModule({
imports:[CommonModule, FormsModule],
declarations: [PageHeaderComponent]
})
export class AppCommonModule { }

Here's app.module:

@NgModule({
imports:      [AppCommonModule, BrowserModule],
declarations: [AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

When the application is run, it throws an error that "ref-pageheader" is not a known element. If I declare the component in app.module, it works fine. So, why can't I declare this component in a module that gets imported into the main app.module? It seems Angular can't find it when this is done. What am I doing wrong? Am I missing something?

Answer 1

I guess you should export it like:

@NgModule({
    imports:[CommonModule, FormsModule],
    declarations: [PageHeaderComponent],
    exports: [PageHeaderComponent]
})
export class AppCommonModule { } 

This way other components could use the component.

Otherwise PageHeaderComponent will only be available inside of AppCommonModule

See also

• https://angular.io/docs/ts/latest/guide/ngmodule.html#add-the-contactmodule

We export the ContactComponent so other modules that import the ContactModule can include it in their component templates.

All other declared contact classes are private by default

• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-export

Export declarable classes that components in other modules should be able to reference in their templates. These are your public classes. If you don't export a class, it stays private, visible only to other component declared in this module.

Answer 2

This has been answered already but for other people having this problem, it was a different solution for me.

Check which module the parent component is being declared in because in my case the parent component was being declared in the shared module of our Angular project. It turned out my child component required to be in declared in the shared module along with the parent to make this work. I took my component out of the module declarations that Angular CLI put it in and put it in the declarations of the shared module, like the parent component and it works.

Key thing is: I used the Angular CLI to generate my component but the CLI added the component to the wrong module declarations, however the Angular CLI wasn't totally wrong to do this as it was actually the logical file directory for the component and the logical module for the component.

In my case the parent component was being used as a routing component. It may turn out that my parent component needs it's own NgModule but I'm not sure yet.

Hope this helps.

Answer 3

If anyone else has the same problem, but so far not found a solution, have a look at your import path.

If you have two modules with the same name like, for instance, CoreModule, you might have just imported the wrong module:

import { CoreModule } from '@angular/flex-layout';

@NgModule({
  imports: [ CoreModule ]
}) export class SomeModule

import { CoreModule } from '../core/core.module';

@NgModule({
  imports: [ CoreModule ]
}) export class SomeModule