Мой нижний колонтитул не работает In Ionic

Question

Я создаю страницу в Ionic, и я также создал отдельный компонент для нижнего колонтитула, и я использую селектор нижнего колонтитула на своей странице, но он показывает ошибку.

Это мои компоненты> 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';
  }

}

Это мои компоненты.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 {}

Это мои 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 {}

Это селектор, который я использую на моей главной странице: (front.html)

<foot-card></foot-card>

, но он показывает ошибку.Я новичок в ионике.Любая помощь очень ценится.

Ошибка:

Тип FootCardComponent является частью объявлений 2 модулей: ComponentsModule и AppModule!Пожалуйста, рассмотрите возможность перемещения FootCardComponent в модуль более высокого уровня, который импортирует ComponentsModule и AppModule.Вы также можете создать новый NgModule, который экспортирует и включает FootCardComponent, а затем импортирует этот NgModule в ComponentsModule и AppModule.

Answer 1

Пожалуйста, выполните шаги

Удалите FootCardComponent из декларации части app.module.ts файла.

Добавьте ComponentsModule в разделе импорта 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 **-------> *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 {}

Дайте мне знать ваш результат

Answer 2

Вырежьте FootCardComponent из объявлений и добавьте его в Entry Components.и дайте мне знать, это работает для вас или нет.

Answer 3

Просто, в app.module.js: удалите FootCardComponent из объявлений и добавьте его в Entry Components.Это решило мою проблему.

См. Ionic 4 пользовательских компонента