@angular/core/@Inject() result with an error : NullInjectorError: No provider for

Question

I found several posts on that topic but I'm obviously missing something.

My main goal is to use an Injectable that requires a parameter.

I found that the way to go is to use the decorator @Inject.

You can see my attempt here :https://stackblitz.com/edit/stackblitz-starters-r5psb2?devToolsHeight=33&file=src%2Ftest-component.component.ts

And just if you can't load that page :

FILE test-service.service.ts

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class TestService {
  constructor(@Inject('arg1') public arg1: string) {}
}

FILE test-component.component.ts

import { Component } from '@angular/core';
import { TestService } from './test-service.service';

@Component({
  selector: 'app-test-component',
  standalone: true,
  imports: [],
  template: `<span>{{testService.arg1}}</span>`,
  providers: [
    {
      provide: 'arg1',
      useValue: 'value1',
    },
  ],
})
export class TestComponent {
  constructor(public testService: TestService) {}
}

OUTPUT

ERROR
Error: R3InjectorError(Environment Injector)[TestService -> arg1 -> arg1]:
NullInjectorError: No provider for arg1!

Answer 1

You service is providedIn:'root', so it means it defined in the root injector.

By doing

{
  provide: 'arg1',
  useValue: 'value1',
},

You only define the value in the NodeInjector, the injector that only belongs to the component.

To fix it, you should declare at the root of your app.

bootstrapApplication(AppComponent, {providers: [{ provide: 'arg1', useValue: 'value1']}