Declared InjectionToken cannot be found on compile of Angular application-CodePudding

Im trying to provide a global configuration, which is dependent on the user's webbrowser, by using an InjectionToken. However the declared const cannot be found in the source code on compiling the application. I have seen this pattern work before(1), but I am not sure what I am doing differently. Below is an abstract of my code.

// ./services/system/masks.service

export declare const NUMBER_MASK: InjectionToken<string>;

export function NumberMaskFactory(): NumberMask {
    const lang = navigator.language.substring(0, 2);
    if (lang == "en") {
        const radix: string = getLocaleNumberSymbol(navigator.language, NumberSymbol.Decimal);
        const thousandSeperator: string = getLocaleNumberSymbol(navigator.language, NumberSymbol.Group);

        return new NumberMask(radix, thousandSeperator);
    }
    return new NumberMask(".", ",");
}


export class NumberMask {
    public radix: string;
    public thousandSeparator: string;
    constructor(radix: string, thousandSeparator: string) {
        this.radix = radix;
        this.thousandSeparator = thousandSeparator;
    }
}

// app.module.ts
import { NumberMaskFactory, NUMBER_MASK } from "./services/system/masks.service";
// ...
providers: [
        {
            provide: NUMBER_MASK,
            useFactory: NumberMaskFactory

        }
// ...

On compile this throws me the following error:

./src/app/app.module.ts:112:21-32 - Error: export 'NUMBER_MASK' (imported as 'NUMBER_MASK') was not found in './services/system/masks.service' (possible exports: NumberMask, NumberMaskFactory)

(Note 1) For example for MSAL_INSTANCE in this sample.

CodePudding user response：

To Create injection token you have to instantiate

 export const NUMBER_MASK = new InjectionToken<string>('');