No provider for ElementRef

[pedropapa]

Ao tentar utilizar a diretiva como dependência de alguma página, o seguinte erro é apresentado:

  StaticInjectorError(Platform: core)[IonContent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

Código da página:

import {BrMaskDirective} from 'br-mask';

@Component({
  selector: 'app-perfil',
  templateUrl: './perfil.page.html',
  styleUrls: ['./perfil.page.scss'],
})
export class PerfilPage implements OnInit {

  public mascaraCampo: string;

  constructor(
    public brMaskerIonic3: BrMaskDirective,
  ) {

  }

  async ngOnInit() {
    this.mascaraCampo = this.brMaskerIonic3.writeValuePerson('55555555555');
  }
}

Isso só acontece quando utilizado como dependência, se utilizar como diretiva em algum .html, funciona normalmente.

[gregorioproenca]

Estou com o mesmo problema:

` import { BrMaskDirective, BrMaskModel } from 'br-mask';

[...]

constructor( public brMask: BrMaskDirective ) { } `

Estou tentando executar o Feature (https://github.com/amarkes/br-mask#features)

[MarcosRibeiroJesus]

Same here, when I try to use this feature -> https://github.com/amarkes/br-mask#features ...

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[IonIcon -> ElementRef]: StaticInjectorError(Platform: core)[IonIcon -> ElementRef]: NullInjectorError: No provider for ElementRef! Error: StaticInjectorError(AppModule)[IonIcon -> ElementRef]: StaticInjectorError(Platform: core)[IonIcon -> ElementRef]: NullInjectorError: No provider for ElementRef!

[pedropapa]

I'm using the following libraries as workaround:

Intl: Natively on JS (to format values).

const intl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
console.log(intl.format(10.3))

string-mask: General string mask

import * as StringMask from 'string-mask';
...
console.log(StringMask.apply(cpf, '000.000.000-00'));
console.log(StringMask.apply(cnpj, '00.000.000/0000-00'));

[dantey89]

Same issue as @MarcosRibeiroJesus has. Adding BrMaskDirective to the providers section cause another error

[thiagoeliasr]

Yeah, having the very same issue here when adding BrMaskDirective to providers. Since this issue is opened since May, probably it's time to consider another library for this matter.

[danielantoniobs]

Mesmo problema com o ionic 4 tentando usar o BrMaskDirective, alguem conseguiu funcionar ?

Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[IonText -> ElementRef]:

[thiagoeliasr]

Mesmo problema com o ionic 4 tentando usar o BrMaskDirective, alguem conseguiu funcionar ?

Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[IonText -> ElementRef]:

Depois de muito quebrar cabeça e estar com prazo em cima, eu desisti do br-mask acabei trocando pelo ngx-mask-ionic, que funcionou pra mim. Acabou dando menos problema. =/

[andre-dourado]

Enfrentando o mesmo problema. Tive que usar o libphonenumber-js seguindo este tutorial para lidar com telefones que possuem ou não o 9 na frente.

[DilipDalwadi]

I solved this problem by adding BrMaskDirective in providers of component like this.

`import { BrMaskDirective, BrMaskModel } from 'br-mask';

@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['./app.component.scss'] providers: [BrMaskDirective] })`

[nunesbns]

I solved this problem by adding BrMaskDirective in providers of component like this.

`import { BrMaskDirective, BrMaskModel } from 'br-mask';

@component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['./app.component.scss'] providers: [BrMaskDirective] })`

This worked for me, thank you.