Ionic 2 - Any type variables

Question

I’m having trouble migrating from Ionic beta.11 to RC0. Every time I put a constructor waiting for type "any" I get the following error.

Ngc error: Error: Error at /Projeto/. tmp/app/app.module.ngfactory.ts:456:134: Property 'any' does not exist on type 'typeof "/Project/. tmp/Directives/Mask"'.

When going on app.module.ngfactory.ts on line 456 it generates the line below:

if ((this.__MaskDirective_75 == (null as any))) { (this.__MaskDirective_75 = new import45.MaskDirective(this.parent.get(import45.any),this.parent.get('mask'))); }

Follow the code of my directive:

import {Directive, Attribute} from '@angular/core';

@Directive({
    selector: '[mask]',
    host: {
        '(keyup)': 'onInputChange()'
    }
})
export class MaskDirective {
    maskPattern: string;
    placeHolderCounts: number;
    dividers: string[];
    modelValue: string;
    viewValue: string;

    constructor(
        public model: any,
        @Attribute("mask") maskPattern: string
    ) {
        this.dividers = maskPattern.replace(/\*/g, "").split("");
        this.dividers.push(" ");
        this.generatePattern(maskPattern);
    }

    onInputChange() {
        this.modelValue = this.getModelValue();
        var stringToFormat = this.modelValue;
        if (stringToFormat.length < 10) {
            stringToFormat = this.padString(stringToFormat);
        }

        this.viewValue = this.format(stringToFormat);
        this.model.viewToModelUpdate(this.modelValue);
        this.model.valueAccessor.writeValue(this.viewValue)
    }

    generatePattern(patternString) {
        this.placeHolderCounts = (patternString.match(/\*/g) || []).length;
        for (let i = 0; i < this.placeHolderCounts; i++) {
            patternString = patternString.replace('*', "{" + i + "}");
        }
        this.maskPattern = patternString;
    }

    format(s) {
        var formattedString = this.maskPattern;
        for (let i = 0; i < this.placeHolderCounts; i++) {
            formattedString = formattedString.replace("{" + i + "}", s.charAt(i));
        }
        return formattedString;
    }

    padString(s) {
        var pad = "          ";
        return (s + pad).substring(0, pad.length);
    }

    getModelValue() {
        var modelValue = this.model.value;
        for (var i = 0; i < this.dividers.length; i++) {
            while (modelValue.indexOf(this.dividers[i]) > -1) {
                modelValue = modelValue.replace(this.dividers[i], "");
            }
        }
        return modelValue;
    }
}

What I can do to fix this issue and continue updating my project?

Answer 1

This happens because the DI (dependency Injection) "system" knows what it needs to inject according to the type of parameter into the constructor().

Example:

constructor(
    private navController: NavController, 
    private http: Http) { }

So Angular2 knows to "give a new one" in the Navcontroller and Http classes.

In your case, as it is any, he doesn’t know what to inject. There are a few ways to solve your problem.

1: I believe in your case, you need to inject the Ngmodel

import {NgModel} from '@angular/forms';
...
constructor(
    public model: NgModel,
    @Attribute("mask") maskPattern: string) {
...
}

2: Tell the guy who manages the dependency injections (DI container), which he should send whenever he needs to give a new one in the Maskdirective class.

In that case I won’t be able to help you, I couldn’t find any practical example.

Useful links:

1 - Related problem

2 - Documentation @Directive

3 - Examples of Dependency Injection