Angular 15 - 考虑使用 @Inject 装饰器指定注入令牌

Question

After using angular's factory provider and sending two arguments in factory.service.ts, I wanted to display 'factory' and a boolean value.

It seems to work fine in other angular versions, but a problem occurs in angular 15 version.

I don't know which part is the problem....

home.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FactoryService } from '../factory.service';
import { LogService } from '../log.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [LogService, 
   {provide: 'another', useClass: LogService}, 
   {provide: 'same',useExisting: LogService}, 
   {provide: 'githubUrl',useValue: 'https://github.com/abcd'}, 
   {provide: 'factory',useFactory: (logService) => {
              return new FactoryService(logService, true);},
              deps: [FactoryService]
   }]
})

export class HomeComponent implements OnInit{

    constructor(private log:LogService, 
        @Inject('another') private another, 
        @Inject('same') private same,
        @Inject('githubUrl') private url,
        @Inject('factory') private factory         
        ) {
        console.log("this.log === this.another", this.log === this.another)
        console.log("this.log === this.same", this.log === this.same)
        console.log(this.url)
    }

    ngOnInit(): void {
        this.log.info('logservice');
        this.factory.log();
    }

}

factory.service.ts

import { Inject, Injectable } from "@angular/core";
import { LogService } from "./log.service";

@Injectable()
export class FactoryService {
    constructor(private logService: LogService, private isFactory: boolean) {}

    public log() {
        this.logService.info(`factory ${this.isFactory}`);
    }
}

Error

Error: src/app/factory.service.ts:6:57 - error NG2003: No suitable injection token for parameter 'isFactory' of class 'FactoryService'.
  Consider using the @Inject decorator to specify an injection token.

6     constructor(private logService: LogService, private isFactory: boolean) {}
                                                          ~~~~~~~~~

  src/app/factory.service.ts:6:68
    6     constructor(private logService: LogService, private isFactory: boolean) {}
                                                                         ~~~~~~~
    This type is not supported as injection token.

I've looked at the official documentation, but I don't know what the problem is.

Answer 1

As per the error message suggested, you should use @Inject decorator for your custom parameter, else Angular will treat it as a dependency and try to resolve it.

Since you don't have such isFactory provider, Angular throwed error.

Add @Inject decorator with named isFactory

factory.service.ts

......
    constructor(private logService: LogService, @Inject('isFactory') private isFactory: boolean) {}
......

Provide the isFactory value and remove second param in new FactoryService

home.component.ts

......
  providers: [LogService, 
   {provide: 'another', useClass: LogService}, 
   {provide: 'same',useExisting: LogService}, 
   {provide: 'githubUrl',useValue: 'https://github.com/abcd'}, 
   {
      provide: 'isFactory',
      useValue: true,
   },
   {provide: 'factory',useFactory: (logService) => {
              return new FactoryService(logService);},
              deps: [FactoryService]
   },
]
})

The code is not tested.

Refer to https://www.positronx.io/how-to-pass-parameters-to-angular-service-using-inject/ for more info.

Answer 2

Simplest way to resolve is to use Injection tokens. If you use factory then these are tree-shakeable.

const IS_FACTORY = new InjectionToken<boolean>('Is factory', {
  providedIn: 'root', // optional
  factory: () => true
});

To provide,

providers: [{ provide: IS_FACTORY, useValue: false}],

And if you want to use in your component with type safety

const isFactory = inject(IS_FACTORY); // or the @Inject method

Second argument of inject allows the usual resolution modifiers of optional, self, host etc.