Angular2 RC6: '<component> is not a known element'
I received this error when I imported Module A into Module B, and then tried to use a component from Module A in Module B.
The solution is to declare that component in the exports
array.
@NgModule({
declarations: [
MyComponent
],
exports: [
MyComponent
]
})
export class ModuleA {}
@NgModule({
imports: [
ModuleA
]
})
export class ModuleB {}
I fixed it with help of Sanket's answer and the comments.
What you couldn't know and was not apparent in the Error Message is: I imported the PlannerComponent as a @NgModule.declaration in my App Module (= RootModule).
The error was fixed by importing the PlannerModule as @NgModule.imports.
Before:
@NgModule({
declarations: [
AppComponent,
PlannerComponent,
ProfilAreaComponent,
HeaderAreaComponent,
NavbarAreaComponent,
GraphAreaComponent,
EreignisbarAreaComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routeConfig),
PlannerModule
],
bootstrap: [AppComponent]
})
export class AppModule {
After:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routeConfig),
PlannerModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Thanks for your help :)
If you have used the Webclipse automatically generated component definition you may find that the selector name has 'app-' prepended to it. Apparently this is a new convention when declaring sub-components of a main app component. Check how your selector has been defined in your component if you have used 'new' - 'component' to create it in Angular IDE. So instead of putting
<header-area></header-area>
you may need
<app-header-area></app-header-area>
I fetch same problem for <flash-messages></flash-messages>
with angular 5.
You just need add below lines in app.module.ts file
import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";
@NgModule({
---------------
imports: [
FlashMessageModule,
------------------
],
-----------------
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
------------
})
NB: I am using this one for message flash-messages