Open
Description
Hi,
I have some services only used at some condition (eg.: button click). Those services affect bundle size. The idea is introduce asyncInject (or deferInject) for injecting (and download the javascript chunk) only when necessary (similar concept of @defer https://angular.dev/guide/templates/defer)
Proposed solution
import { Component, asyncInject /** or deferInject */ } from '@angular/core';
import { BarService } from './bar.service';
@Component({
selector: 'foo',
template: `<button (click)="onClick()">click</button>`,
providers: [
BarService,
],
})
export class FooComponent {
barService: Promise<BarService> = asyncInject(BarService);
onClick(){
(await this.barService).hello();
}
}This is just a POC https://stackblitz.com/edit/stackblitz-starters-rhaxw1jj