Angular what is the best practice for adding providers to component

Question

I have built an Angular application which uses lazy loading. Throughout the application if there is a 1:1 relationship between a component and service I have structured my code as below:

@Injectable()
export class ContactFormService {
    ....stuff...
}

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss'],
  providers: [ ContactFormService ]
})
export class ContactComponent {
    ....stuff...
}

As you can see I've directly added the service as one of the providers, rather than using @Injectable({ providedIn: 'root' }).

At the time I thought it would help any potential issues around using a singleton, should this service be used in a different component and lose that 1:1 relationship.

The side effect that I have noticed is that when writing unit tests I have to add overrideComponent() to the configuration

I have to do this (NOTE: I have to override the provided service):

TestBed.configureTestingModule({
   declarations: [ContactComponent]
})
.overrideComponent(ContactComponent, 
   { set: { providers: [{ provide: ContactFormService, useValue: contactFormServiceSpyObj }] }})
.compileComponents();

Instead of this:

await TestBed.configureTestingModule({
  providers: [
    { provide: ContactFormService, useValue: contactFormServiceSpyObj }
  ],
  declarations: [ ContactComponent ]
}).compileComponents();

This has made me wonder am I following a really bad practice? and if so, what circumstances would be suitable to inject a service in the way that I am doing so?

I understand that @Injectable({ providedIn: 'root' }) helps with the tress shaking process when building the application

Answer 1

I see nothing wrong with what you're doing - I also add services to component providers when I want them to be exclusive to the component instance (and possibly the children).

You should remember though to clean up resources on ngOnDestroy method in the service. (Yes, angular calls ngOnDestroy on services).

In situations where only one component instance is displayed at once I prefer a different approach to component provider. I use a singleton service provided in root and call an initialization method of the service on the component ngOnInit. In that method I clean up any resources left over from previous component instance. That comes really handy when I'm using a single application wide state tree and I don't want to generate keys for each component separately.