注入令牌在服务中未定义，但在组件中找到

Question

I'm adding external js libraries as InjectionTokens to an Angular 7 application, so as to use them in @Components and services. I've created the interface, the InjectionToken<> and the Provider , and added the Provider to the providers: [] property of an @NgModule .

I've been following this guide on how to inject 3rd party libraries.

When I inject the InjectionToken in a component, I can use it perfectly well. When I try to inject it into a service, I get a ... is not defined error.

angular.json :

[...]

"scripts": [
    "./node_modules/hot-formula-parser/dist/formula-parser.js",
    "./node_modules/@handsontable/formulajs/dist/formula.js"
]

[...]

entry.module.ts :

import { NgModule, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EntryComponent } from './entry.component';
import { RouterModule } from '@angular/router';
import { entryRoutes } from './entry.routes';
import { SharedModule } from 'src/shared/shared.module';
import { EntryService } from './entry.service';
import { HotParserProvider} from './parser/parser.injector';

@NgModule({
    declarations: [EntryComponent],
    imports: [SharedModule, CommonModule, RouterModule.forChild(entryRoutes)],
    exports: [],
    providers: [
        HotParserProvider,
        EntryService, 
    ],
})
export class EntryModule { }

parser.injector.ts :

import { InjectionToken, ValueProvider } from "@angular/core";

interface IHotParser {
    parse: (formula: string) => {error:string, result: any};
}

const HotParser: InjectionToken<IHotParser> = new InjectionToken<IHotParser>('HotParser');

const HotParserProvider: ValueProvider = {
    provide: HotParser,
    useValue: new window['formulaParser'].Parser()
}

export {IHotParser, HotParser, HotParserProvider};

entry.component.ts :

import { Component, Inject } from '@angular/core';
import { EntryService } from './entry.service';
import { HotParser, IHotParser } from './parser/parser.injector';

@Component({
    selector: 'tp-entry',
    templateUrl: './entry.component.html',
    styleUrls: ['./entry.component.css']
})
export class EntryComponent {
    constructor(
        @Inject(HotParser) private parser: IHotParser, // No error!
        private entryService:EntryService
    ) { }

    ngOnInit(): void {
        console.log(parser.parse("SUM(1,1)"); // Correct output!       
    }
}

entry.service.ts :

import { Injectable, Inject } from '@angular/core';
import { IHotParser} from './parser/parser.injector';

@Injectable()
export class EntryService {
    constructor(
        @Inject(HotParser) private parser: IHotParser // HotParser is not defined
    ) { }

Is there a difference between injecting a token in a component and in a service? I've tried changing the module provider-array's order, to no avail...

Answer 1

Nevermind. Visual Studio Code 's linting didn't warn me that HotParser hadn't been imported in the service's import statement... I saw the following compiler error:

ERROR in src/entry/entry.service.ts(11,25): error TS2304: Cannot find name 'HotParser'.

So ended up changing:

import { IHotParser } from './parser/parser.injector';

to:

import { HotParser, IHotParser } from './parser/parser.injector';

And the error went away.