[Ionic 5] Import Global Custom Components

Ionic Framework
1

Greetings everyone,

im trying to import an custom component im my application but have problems at the moment to implement this component in a page. Then I will leave the classes I have in detail so they can guide me if I’m doing something wrong.

Class Component.Module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    FooterComponent
  ],
  exports: [
    FooterComponent
  ],
  imports: [
    IonicModule
  ]
})
export class ComponentsModule { }

Class app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
import { FormsModule  } from '@angular/forms';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { DatabaseServiceProvider } from '../app/providers/database-service/database-service';
import { EsqueletoLoginProvider } from '../app/providers/no4get-login/no4get-login';
import { EsqueletoServiceProvider } from '../app/providers/no4get-service/no4get-services';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpBackend, HttpXhrBackend } from '@angular/common/http';
import { HTTP } from '@ionic-native/http/ngx';
import { SQLite } from '@ionic-native/sqlite/ngx';
import { Uid } from '@ionic-native/uid/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, HttpClientModule, HttpModule, ComponentsModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Facebook,
    FormsModule,
    GooglePlus,
    DatabaseServiceProvider,
    EsqueletoLoginProvider,
    EsqueletoServiceProvider,
    HTTP,
    SQLite,
    Uid,
    AndroidPermissions,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Class paginauno.module.ts (page)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { ComponentsModule } from '../../components/components.module';
import { IonicModule } from '@ionic/angular';

import { PaginaunoPage } from './paginauno.page';

const routes: Routes = [
  {
    path: '',
    component: PaginaunoPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [PaginaunoPage]
})
export class PaginaunoPageModule {}

Code Paginauno.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Pagina Uno</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

<footer></footer>

Class footer.component.html

<ion-footer class="mColorFooter">
  <div class="divCentrado">
      <ion-grid>
          <ion-row>
              <ion-col col-4>
                  <button ion-button full clear (click)="RedirectRedesSociales()">
                      <div>
                          <ion-icon name="logo-twitter" class="ionIcon"></ion-icon><br>
                          <label text-wrap class="labelStyle">Redes&nbsp;Sociales</label>
                      </div>
                  </button>
              </ion-col>
              <ion-col col-4>
                  <button ion-button full clear (click)="RedirectContacto()">
                      <div>
                          <ion-icon name="mail" class="ionIcon"></ion-icon><br>
                          <label text-wrap class="labelStyle">Contactenos</label>
                      </div>
                  </button>
              </ion-col>
              <ion-col col-4>
                  <button ion-button full clear>
                      <div>
                          <ion-icon name="key" class="ionIcon" (click)="CerrarApp()"></ion-icon><br>
                          <label text-wrap class="labelStyle">Salir</label>
                      </div>
                    </button>
              </ion-col>
          </ion-row>
      </ion-grid>  
  </div>
</ion-footer>

My ionic info below:

Ionic:

Ionic CLI : 5.0.0
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 10 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.1

System:

NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

image
image.png1929×985 19.7 KB

As you can see in the image, it does not show me the footer that I have created and implemented.

Any help, advice or whatever you want to tell me will be very welcome and I thank you in advance for your help =)