Ionic Directive for numeric masks is not accessed from other pages

I created a project with Ionic with two pages: Login and registration.

The structure is this

Inboth,ItriedtoaddadirectivethatcreatesamaskforCNPJ.Followthepolicycode

import{Directive,HostListener,Input}from'@angular/core';import{NG_VALUE_ACCESSOR,ControlValueAccessor}from'@angular/forms';@Directive({selector:'[mask]',providers:[{provide:NG_VALUE_ACCESSOR,useExisting:MaskDirective,multi:true}]})exportclassMaskDirectiveimplementsControlValueAccessor{onTouched:any;onChange:any;@Input('mask')mask:string;writeValue(value:any):void{}registerOnChange(fn:any):void{this.onChange=fn;}registerOnTouched(fn:any):void{this.onTouched=fn;}@HostListener('keyup',['$event'])onKeyup($event:any){varvalor=$event.target.value.replace(/\D/g,'');varpad=this.mask.replace(/\D/g,'').replace(/9/g,'_');varvalorMask=valor+pad.substring(0,pad.length-valor.length);//retornacasopressionadobackspaceif($event.keyCode===8){if(this.onChange!=undefined){this.onChange(valor);}return;}if(valor.length<=pad.length&&this.onChange!=undefined){this.onChange(valor);}varvalorMaskPos=0;valor='';for(vari=0;i<this.mask.length;i++){if(isNaN(parseInt(this.mask.charAt(i)))){valor+=this.mask.charAt(i);}else{valor+=valorMask[valorMaskPos++];}}if(valor.indexOf('_')>-1){valor=valor.substr(0,valor.indexOf('_'));}$event.target.value=valor;}@HostListener('blur',['$event'])onBlur($event:any){if($event.target.value.length===this.mask.length){return;}if(this.onChange!=undefined){this.onChange('');}$event.target.value='';}}

Touseitwouldonlyaddinlogin.html

<ion-inputtype="tel" maxlength="18" name="cnpj" mask="99.999.999/9999-99" [(ngModel)]="registerCredentials.cnpj" required></ion-input>

and in the registry

<ion-input type="tel" maxlength="18" name="cnpj" mask="99.999.999/9999-99" required></ion-input>'

Login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { ServiceProvider } from '../../providers/service/service';


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  registerCredentials: any = { cnpj: '', senha: '' };

  constructor(public navCtrl: NavController, private serviceProvider: ServiceProvider) {
  }

  public criarConta() {
    this.navCtrl.push('RegistroPage');
  }

  public login() {

    this.serviceProvider.post('autenticacao/autenticarEmpresa', { id: 1 }).subscribe(dados => {
      debugger
    });
  }

}

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { ServiceProvider } from '../providers/service/service';
import { MaskDirective } from '../directives/MaskDirective ';



@NgModule({
  declarations: [
    MyApp,
    MaskDirective,
    LoginPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    ServiceProvider
  ]
})
export class AppModule { }

When I run the code on the login page the text is formatted, but when I go to the registration page the policy is not executed. I believe it's something with modularization, how to export this directive to the module of the pages.

In login.module.ts and registry.module.ts nothing was changed

How can I make this directive visible in both modules?

I also ran a google search and saw something make this directive a module.

If the solution is to be added in a module. How do I do this?

Thank you.