Bundle size is a critical subject when building a SPA. The bigger it is, the longer it will take to start the app. Framework and developers have been relying more and more on lazy-loading to delay loading of non necessary code. The most common ones are lazy-loaded routes.

When it comes to services, we can lazy load it by using a dynamic import(). Let's take as an example a situation where a page displays a heavy WebGL animation that we want to lazy-load.

We suppose that HomeAnimation is a Angular service with Injectable({providedIn: 'root'}).

home.component.ts

class HomeComponent {
  injector = inject(Injector);
  ...
  private async loadHomeAnimation() {
    const HomeAnimation = import('./services/home-animation.service').then((c) => c.HomeAnimation),
    this.injector.get(HomeAnimation);
    this.homeAnimation.init(this.element);
  }
}

This is really straightforward but it has a major downside : This doesn't allow us to use a mock service in unit tests.

Leverage dependency injection

DI is a powerful tool, we will leverage it here to create/share instances and to help on testing.

First let's start with this helper function.

export async function injectAsync<T>(
  injector: Injector,
  providerLoader: () => Promise<ProviderToken<T>>,
): Promise<T> { 
  const injectImpl = injector.get(InjectAsyncImpl);
  return injectImpl.get(providerLoader);
}

The injector will do 2 things here :

• Retrieve a an instance of InjectAsyncImpl, a class providing an implementation of lazy loading
• Create the instance of the service we just loaded (the class must be available to the injector, so you'll have to add @Injectable({providedIn: 'root'}) to the class you want to lazy load)

The InjectAsyncImpl class can very simple:

inject-async.ts

@Injectable({providedIn: 'root'})
class InjectAsyncImpl<T> {
  async get(injector: Injector, providerLoader: () => Promise<ProviderToken<T>>): Promise<T> {
    const type = await providerLoader();

    return injector.get(type)
  }
}

With this implementation, we can now override the provider for InjectAsyncImpl in our unit test to return a mock instance of our lazy-loaded service.

my-test.spec.ts

TestBed.configureTestingModule({
  providers: [
    { provide: InjectAsyncImpl, useValue: { get () => Promise.resolve(MyMockedService) }}
  ]
});

Our current implementation works but the DX here is far from great. It's only easy to mock one lazy-loaded service and we'd have to create a different class/object for every mocked service. So let's refactor that to improve it.

Improving DX

To simplify the mocking of our lazy-loaded services, we'll add support for overrides to our implementation.

inject-async.ts

@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();
    }
  }
}

These overrides will be set by a helper function

export function mockAsyncProvider<T>(type: Type<T>, mock: Type<unknown>) {
  return [
    {
      provide: ENVIRONMENT_INITIALIZER,
      multi: true,
      useValue: () => {
        inject(InjectAsyncImpl).override(type, mock);
      },
    },
  ];
}

ENVIRONMENT_INITIALIZER is a multi-provider token for initialization functions that will run upon construction of an environment injector. So the override method will be called on setup for every mocked service.

Now we have a nice & clean testing setup!

my-test.spec.ts

 * TestBed.configureTestingModule({
 *     providers: [
 *       mockAsyncProvider(MyFooService, MyFakeService)
 *       mockAsyncProvider(MyBarService, MyBarService)
 *   ]
 * });

Improving Angular integration

When providing a service in root, the service will be created by the root injector. This has a major downside of never firing DestroyRef.onDestroy.

From the official docs:

If DestroyRef is injected in a component or directive, the callbacks run when that component or directive is destroyed. Otherwise the callbacks run when a corresponding injector is destroyed.

So if we want a lazy-loaded service that gets destroyed with the component that created it, we'll need to change our implementation.

Our constraints are :

• The service cannot be providedIn: 'root' (we want it to be destroyed with the NodeInjector)
• The service cannot be provided on the component, this would break the lazy loading
• We can't add a class to an injector, we'll need to create a new one.

With this in mind, we'll add following

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)!;

If we go back to our initial example, this how we would use our new helper method to lazy-load the HomeAnimation service.

export class HomeComponent {
  private readonly injector = inject(Injector); // The Node injector

  ...

  private async loadHomeAnimation() {
    this.homeAnimation = await injectAsync(this.injector, () =>
      import('./services/home-animation.service').then((c) => c.HomeAnimation),
    );

    this.homeAnimation.init(this.element);
  }
}

It is important here that the injector is a NodeInjector and not the EnvironmentInjector. The former will be destroyed with the component while the latter will survive the component.

Final implementation

Here is our final implementation of the inject-async.ts helper functions.

import {createEnvironmentInjector, DestroyRef, ENVIRONMENT_INITIALIZER, EnvironmentInjector, inject, Injectable, Injector, Provider, ProviderToken, Type,} from '@angular/core';

/**
 * inject a service asynchronously
 *
 * @param: injector. If the injector is a NodeInjector the loaded module will be destroyed alongside its injector
 */
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);
      },
    },
  ];
}