Issue
What is the recommended approach to lazy loading a service class. Here is what I have in mind:
Create a feature module foo
, which contains foo.component.ts, where the foo.module provides the service and the service is injected into foo.component. As a result the service will only be loaded if you navigate to the foo.component and the route is defined as follows:
app.-routing.module.ts:
...
const routes: Routes = [
{
path: 'foo',
loadChildren: () =>
import('./foo/foo.module').then((m) => m.FooModule),
},
];
...
Is there also another way to lazy load a service, because it's not necessary to navigate to another component? It would be enough if I can call the service when button is clicked inside the app.component. But the requirement is, that the service is only injected/loaded after the button was clicked.
app.component.ts:
import { BarService } from './foo/bar.service';
@Component({
selector: 'app-root',
template: `
<button (click)="runService()">Run Service</button>
`,
})
export class AppComponent {
constructor(private barService: BarService) {}
runService() {
this.barService.doSomething();
}
}
Solution
I wrote about this recently.
If you want to lazy-load a service programmatically, you will need to use a dynamic import : const myService = import('./myService.ts')
But by doing this you will be limited in your tests, you would be able to mock that service. This is why I wrote that function :
export async function injectAsync<T>(
injector: Injector,
providerLoader: () => Promise<ProviderToken<T>>,
): Promise<T> {
const injectImpl = injector.get(InjectAsyncImpl);
return injectImpl.get(injector, providerLoader);
}
@Injectable({providedIn: 'root'})
class InjectAsyncImpl<T> {
private overrides = new WeakMap(); // no need to cleanup
override<T>(type: Type<T>, mock: Type<unknown>) {
this.overrides.set(type, mock);
}
async get(injector: Injector, providerLoader: () => Promise<ProviderToken<T>>): Promise<T> {
const type = await providerLoader();
// Check if we have overrides, O(1), low overhead
if (this.overrides.has(type)) {
const module = this.overrides.get(type);
return new module();
}
if (!(injector instanceof EnvironmentInjector)) {
// We're passing a node injector to the function
// This is the DestroyRef of the component
const destroyRef = injector.get(DestroyRef);
// This is the parent injector of the environmentInjector we're creating
const environmentInjector = injector.get(EnvironmentInjector);
// Creating an environment injector to destroy it afterwards
const newInjector = createEnvironmentInjector([type as Provider], environmentInjector);
// Destroy the injector to trigger DestroyRef.onDestroy on our service
destroyRef.onDestroy(() => {
newInjector.destroy();
});
// We want to create the new instance of our service with our new injector
injector = newInjector;
}
return injector.get(module)!;
}
}
/**
* Helper function to mock the lazy-loaded module in `injectAsync`
*
* @usage
* TestBed.configureTestingModule({
* providers: [
* mockAsyncProvider(SandboxService, fakeSandboxService)
* ]
* });
*/
export function mockAsyncProvider<T>(type: Type<T>, mock: Type<unknown>) {
return [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => {
inject(InjectAsyncImpl).override(type, mock);
},
},
];
}
Also this function handles the usage of DestroyRef
used by takeUntilDestroyed
.
Answered By - Matthieu Riegler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.