Scoped InjectionToken

[muhamedkarajic]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Given:

export const MY_SERVICE = new InjectionToken<{ data: string }>('MyService', {
    factory: () => {
        console.log('called MyService factory')
        return {
            data: 'some data',
            onDestroy: () => {
                console.log('Cleaning up resources...');
            }
        };
    }
});

When:

@Component({
    template: ``,
    providers: [
        {
            provide: MY_SERVICE,
            useClass: (MY_SERVICE as any)
        } as Provider
    ],
    standalone: false
})
export class SomeComponent implements OnInit, OnDestroy {
    myService = inject(MY_SERVICE);

    ngOnInit() {
        console.log(myService);
    }

Then: ERROR.

Please provide a link to a minimal reproduction of the bug

I think I did.

Please provide the exception or error you saw

core.mjs:6846 ERROR TypeError: Cannot read properties of undefined (reading 'ngOnDestroy')
    at registerDestroyHooksIfSupported (core.mjs:32474:39)
    at resolveProvider (core.mjs:32387:17)
    at resolveProvider (core.mjs:32363:13)
    at providersResolver (core.mjs:32350:9)
    at definition.providersResolver (core.mjs:32604:20)
    at initializeDirectives (core.mjs:17488:17)
    at resolveDirectives (core.mjs:17405:9)
    at elementStartFirstCreatePass (core.mjs:17796:9)
    at ComponentFactory.create (core.mjs:17975:35)
    at ViewContainerRef.createComponent (core.mjs:18287:47)
    at RouterOutlet.activateWith (router.mjs:2905:35)
    at ActivateRoutes.activateRoutes (router.mjs:3319:40)
    at router.mjs:3272:18
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (router.mjs:3271:29)
    at ActivateRoutes.activate (router.mjs:3183:14)

// In source code of angular
function registerDestroyHooksIfSupported(tView, provider, contextIndex, indexInFactory) {
    const providerIsTypeProvider = isTypeProvider(provider);
    const providerIsClassProvider = isClassProvider(provider);
    if (providerIsTypeProvider || providerIsClassProvider) {
        const classToken = providerIsClassProvider ? resolveForwardRef(provider.useClass) : provider;
        const prototype = classToken.prototype;
        const ngOnDestroy = prototype.ngOnDestroy; // HERE IT FAILS

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.1.7
Node: 20.18.1
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.1.6
... common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.7
@angular-devkit/build-angular   19.1.7
@angular-devkit/core            19.1.7
@angular-devkit/schematics      19.1.7
@angular/cli                    19.1.7
@angular/material               19.1.4
@angular/pwa                    19.1.7
@schematics/angular             19.1.7
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else?

I wonder if this is possible and if not what makes it not possible. Do I really have to make concrete classes to have this functionality?

P.S: Get the same error when its not having onDestroy.

[JeanMeche]

It looks like you want the same thing than #56815.

[muhamedkarajic]

It looks like you want the same thing than #56815.

I want all the fancy features first. I think I'll move the conversation over there then, thanks!

[JeanMeche]

The current workaround I would suggest, reuse the factory function:

function factoryFn() {
  console.log('called MyService factory')
        return {
            data: 'some data',
            onDestroy: () => {
                console.log('Cleaning up resources...');
            }
        };
}

export const MY_SERVICE = new InjectionToken<{ data: string }>('MyService', {
    factory: factoryFn
});

@Component({
    template: ``,
    providers: [
        {
            provide: MY_SERVICE,
            useFactory: factoryFn
        }
    ],
    standalone: false
})
export class SomeComponent implements OnInit, OnDestroy {
    myService = inject(MY_SERVICE);

    ngOnInit() {
        console.log(myService);
    }
}

[muhamedkarajic]

@JeanMeche is it possible to somehow access the factory from InjectionToken? Cause I build those things dynamically and wondered just if this use case works so I know its duable. I had already tried MY_SERVICE.factory but nothing.

[JeanMeche]

The factory is not accessible via a public API (it's via a private one).

Let me re-open this issue, we'll discuss it with the team and see where we'd like to go with this !

[muhamedkarajic]

The factory is not accessible via a public API (it's via a private one).

Let me re-open this issue, we'll discuss it with the team and see where we'd like to go with this !

Ty for being so quick. My use case is the following maybe it helps your team to understand where I am coming from, I have singelton injection tokens, overall what they do is just help me to make the pattern simpler for the following pattern

export interface DiBuilder {
    providers: Provider[]
}

export const DI_CONFIG_PROVIDERS: DiBuilder[] = [];

export class DiConfigServiceBuilder<TObj> implements DiBuilder {
    constructor() { DI_CONFIG_PROVIDERS.push(this); }

    token: InjectionToken<TObj> = new InjectionToken<void>(v4());

    register = (
        serviceFn: () => TObj
    ): void => {
        if (this.serviceToken)
            throw Error("Register is supposed to be called once only.");
        this.serviceToken = new InjectionToken<TObj>(v4(), {
            providedIn: 'root',
            factory: () => serviceFn()
        });
    }

    private originalToken: InjectionToken<DiConfigServiceById<TObj>[]> = new InjectionToken<void>(v4());
    private serviceToken: InjectionToken<DiConfigServiceById<TObj>> | undefined = undefined;
    get providers() {
        if (!this.serviceToken)
            throw Error("Service never registered.");

        const providers = [{
            provide: this.originalToken,
            useClass: this.serviceToken as unknown as Type<any>,
            multi: true
        } as Provider];

        return providers;
    }
}

//here is a super simple example
export const myConfigBuilder = new DiConfigServicesBuilder<IRouteFowardConfLike>();

//core lib
const genericConcept = inject(myConfigBuilder.token);

genericConcept.export()

//business logic lib A
myConfigBuilder.register(() => {
    const whatever = inject(whatever);
    return whatever.export();
});

This is basically like the InjectionToken pattern, but in my case since its a function I can also provide additional params e.g. tags. Those tags can have different meaning in different modules.

E.g. the return value can also be Record<string | TDefinedShape[]>. Here is a use case for it, I want genric implementation to be defined at the core level, e.g. if you export data from some view, the view itself dose not know how to do it, but it can loop trough the different services who have configs and based on it gather info. E.g. a tag could be the module but it could also be some concrete business logic name.

// business logic A lib
const TAG_A = 'TAG_A';

myConfigBuilder.register(() => {
    const coreService = inject(serviceFromLibCore);

    return {
       ...coreService.export(),
       name: TAG_A
   }
}, [TAG_A]);

What I can do with this, e.g. I have the generic logic of expoerting data within a service, but I want to change on different levels of libraries the name. To not have to write it 5 times for 6 different libs I just call base implementation and adjust the name.

Then the core lib just fetches all those services as it would do with inject(token) but now it can call the lib implementaiton from the other 5 libs. The other benefit is that I can in libB as long as libB knows about libA import all the services from libA. This is probably already faily known but its so much boilerplate and redundancy.

I can provide other use cases if its worth angular teams time.

[muhamedkarajic]

The factory is not accessible via a public API (it's via a private one).

@JeanMeche can you tell me how to access the factory which is via private one? I would prefear not to have to extract the function as a helper every time.

[JeanMeche]

I would not recommend accessing that is this not part of the public API.

Also, I'm closing as duplicate of #49807