title: My Footer selector is not working In Ionic
body: <p>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.</p>
  
  <p>This is my components>foot-card>foot-card.ts</p>
  
  <pre><code>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';
    }
  
  }
  </code></pre>
  
  <p>This is my components.module.ts:</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>This is my app.module.ts: </p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>This is the selector that i am using in my front page: (front.html)</p>
  
  <pre><code>&lt;foot-card&gt;&lt;/foot-card&gt;
  </code></pre>
  
  <p>but it is showing the error . I am new to ionic. Any help is much appreciated.</p>
  
  <p>Error: </p>
  
  <p><strong>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.</strong></p>