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.
CodePudding user response:
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.
CodePudding user response:
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.