CODEWITHSUNDEEP
angulartypescriptdependency-injection
Nelladel
Nelladel

Reputation: 188

Injection token undefined in service, but found in component

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...

Upvotes: 0

Views: 2019

Answers (1)

Nelladel
Nelladel

Reputation: 188

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.

Upvotes: 1

Related Questions