My Footer selector is not working In Ionic

Question

I am creating a page in Ionic and I have also created a separate component for the footer and I am using the footer selector in my page but It is showing the error.

This is my components>foot-card>foot-card.ts

import { Component } from '@angular/core';

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

  constructor() {
    console.log('Hello FootCardComponent Component');
    this.text = 'Hello World';
  }

}

This is my components.module.ts:

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

@NgModule({
    declarations: [FootCardComponent],
    imports: [IonicModule],
    exports: [FootCardComponent]
})

export class ComponentsModule {}

This is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginpagePage } from '../pages/loginpage/loginpage';
import { FrontPage } from './../pages/front/front';
import { FooterPage } from './../pages/footer/footer';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HttpClientModule } from '@angular/common/http';
import { RestapiProvider } from '../providers/restapi/restapi';
import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    LoginpagePage,
    FrontPage,
    FooterPage,
    FootCardComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginpagePage,
    FrontPage,
    FooterPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestapiProvider
  ]
})
export class AppModule {}

This is the selector that i am using in my front page: (front.html)

<foot-card></foot-card>

but it is showing the error . I am new to ionic. Any help is much appreciated.

Error:

Type FootCardComponent is part of the declarations of 2 modules: ComponentsModule and AppModule! Please consider moving FootCardComponent to a higher module that imports ComponentsModule and AppModule. You can also create a new NgModule that exports and includes FootCardComponent then import that NgModule in ComponentsModule and AppModule.

Your template is in this case footer.html.. are you sure this isnt empty? — Jonathan, Dec 12 '18 at 09:59
So actually it seems you want to use a Ionic Page as Component. You should create a component instead of a Page: https://ionicframework.com/docs/cli/generate/ — Jonathan, Dec 12 '18 at 10:07
btw: here is a nice tutorial for creating a component: https://www.joshmorony.com/build-a-custom-flash-card-component-in-ionic-2/ — Jonathan, Dec 12 '18 at 10:10
@Jonathan . But why do create a component. I have created a page and using the selector I can use it on other page like in Angular. — , Dec 12 '18 at 10:21
When you create a component, you can use it on all your Pages. But when you create something local in one Page like you do, you wont be able to use it in other pages — Jonathan, Dec 12 '18 at 10:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185122/discussion-between-raghav-and-jonathan). — , Dec 12 '18 at 10:29

score 1 · Answer 1 · answered Dec 17 '18 at 10:34

1

Cut FootCardComponent from declarations and add it to Entry Components. and let me know is this working for you or not.

answered Dec 17 '18 at 10:34

TechValens

437
6
20

score 0 · Answer 2 · answered Dec 13 '18 at 04:52

0

Just, In the app.module.js: Remove FootCardComponent from declarations and add it to Entry Components. This solved my problem.

See Ionic 4 custom components

answered Dec 13 '18 at 04:52

score 0 · Accepted Answer · answered Dec 13 '18 at 10:03

Please follow the steps

Remove the FootCardComponent from the declaration part of app.module.ts file.

Add ComponentsModule in the import section of app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginpagePage } from '../pages/loginpage/loginpage';
import { FrontPage } from './../pages/front/front';
import { FooterPage } from './../pages/footer/footer';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpClientModule } from '@angular/common/http';
import { RestapiProvider } from '../providers/restapi/restapi';
import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    LoginpagePage,
    FrontPage,
    FooterPage,
    FootCardComponent **-------> *Remove this line***
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ComponentsModule, ---------> *Add ComponentsModule in import section*
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginpagePage,
    FrontPage,
    FooterPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestapiProvider
  ]
})
export class AppModule {}

Let me know your outcome

You also have to add FootCardComponent in the entryComponents in app.module.ts. @Anand Raj. — , Dec 13 '18 at 10:19
Can you give the answer for this question? https://stackoverflow.com/questions/53664700/ionic-3-login-authentication-using-api-cannot-read-property-json-of-null — , Dec 13 '18 at 10:21
@Raghav Please I have added one answer. Please go through it — Arj 1411, Dec 13 '18 at 12:10

My Footer selector is not working In Ionic

3 Answers3

Please follow the steps