I wanted to create a simple component and include it on a page. I created it with ionic g component my-header (ionic-cli v3 beta), fixed the IonicPageModule bug and then added to another page. I then get this error:
Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
The "MyHeaderComponent" was added to the @NgModule declarations automatically.
Thanks for your help.
EDIT:
The component is located inside my components folder:
components/my-header/my-header.html
<div>
{{text}}
</div>
components/my-header/my-header.module.ts
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';
@NgModule({
declarations: [
MyHeaderComponent,
],
imports: [
IonicModule,
],
exports: [
MyHeaderComponent
],
entryComponents:[
MyHeaderComponent
]
})
export class MyHeaderComponentModule {}
components/my-header/my-header.scss
my-header {}
components/my-header/my-header.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-header',
templateUrl: 'my-header.html'
})
export class MyHeaderComponent {
text: string;
constructor() {
console.log('Hello MyHeaderComponent Component');
this.text = 'Hello World';
}
}
app/app.module.ts
/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';
@NgModule({
declarations: [
MyApp,
MyHeaderComponent
],
...
pages/home/home.html
You dont have to import MyHeaderComponent in ngModule.
You should import MyHeaderComponentModule in your page module where you want to use this.
imports: [
MyHeaderComponentModule,
],
home.module.ts directly. For some reason it doesn't work if I import it in my app.module.ts. I tried that before because I thought that would make it available "gobally". - Andreas Gassmann
Since ionic 3 supports lazy-loading, you need not import your custom component in the app. module.ts file. Instead you can import it in specific page's module.ts file. For eg: If you want to use your custom component in your homepage you can just import it in your home.module.ts file as given below:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MyHeaderComponent }from '../../components/myheader/myheader';
@NgModule({
declarations: [
HomePage,
MyHeaderComponent
],
imports: [
IonicPageModule.forChild(HomePage),
],
exports: [
HomePage,
]
})
export class HomePageModule {
}However don't forget to remove your import and declarations from app.module.ts file which is added automatically when you create your custom component.
MyHeaderComponent from declarations to imports otherwise it will not work - Georg Kastenhofer
Just to clarify: I am using the a custom navigatorComponent in many pages (reusable component).
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';
@NgModule({
declarations: [
TestPage,
],
imports: [
IonicPageModule.forChild(EntriesPage),
TranslateModule.forChild(),
PipesModule,
NavigatorComponentModule
],
exports: [
TestPage,
],
providers:[
NavigatorComponent
]
})
export class TestPageModule {}
Note: the navigatorComponent has 4 files: the ts, css, html and yourcomponentname.module.ts. The "ionic g component " command doesn't generate the last file (yourcomponentname.module.ts). So I did it.
Here is my module. Hope it will help you answer your question:
@NgModule({
declarations: [
TestPage
],
imports: [
IonicPageModule.forChild(TestPage),
TranslateModule.forChild(),
PipesModule,
NavigatorComponentModule
],
exports: [
EntriesPage,
],
providers:[
NavigatorComponent
]
})
Late answer for the thread, but I'm sure there's more people that can use this information explained in another perspective.
In Ionic, custom angular components are organized under a separate module called ComponentsModule. When the first component is generated using ionic generate component, along with the component, ionic generates the ComponentsModule. Any subsequent components gets added to the same module, rightly so.
Here's a sample ComponentsModule
import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
declarations: [CustomAngularComponent],
imports: [IonicModule],
exports: [CustomAngularComponent],
entryComponents:[
]
})
export class ComponentsModule {}
To use the ComponentsModule in the app, like any other angular modules, the ComponentsModules needs to be imported to the AppModule. ionic generate component (v 4.12) does not add this step, so this has to be added manually.
Excerpt of AppModule:
@NgModule({
declarations: [
//declaration
],
imports: [
//other modules
ComponentsModule,
],
bootstrap: [IonicApp],
entryComponents: [
//ionic pages
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
//other providers
]
})
export class AppModule {}
You must import component in the module. Make sure you also export that component.
@NgModule({
imports: [
IonicModule,
],
declarations:[
MyHeaderComponent
],
exports:[
MyHeaderComponent
],
entryComponents:[
MyHeaderComponent
]
})
ComponentsModuleinto the page module, I had to add the component toentryComponentsof the components module (which is shown in the question). - Jason Goemaat