Angular: Lazy loading modules with services

Question

I\'ve been following this tutorial, to understand lazy loading, and below is my inference.

Scenario 1: Services are provided by putting them in the

Answer 1

Here is the way I do it: https://stackblitz.com/edit/angular-lazy-service-module?file=src%2Fapp%2Fapp.component.ts

This is a proof of concept. You need to watch out what injector you use (in case the lazy service need some dependencies) and how you manage the life-cycle of the lazy loaded service (how many instances you create, etc.).

My use case is that there is a pretty big service (export to excel, over 400 KB gziped) that is used in multiple areas of the application but I don't want to load/parse it until it's actually needed - faster initial load! (I actually also used a delay preload strategy that loads the modules after a few seconds).

The basic idea is that you define it as a lazy module in a route (that you don't actually use) but you trigger the load manually. You also resolve the service from that module (once you have it) by using an injection token.

lazy module

import { NgModule } from '@angular/core';

import { LazyService } from './lazy-service.service';
import { LAZY_SERVICE_TOKEN } from './lazy-service.contract';

@NgModule({
  providers: [{ provide: LAZY_SERVICE_TOKEN, useClass: LazyService }],
})
export class LazyServiceModule {
}

lazy service

import { Injectable } from '@angular/core';
import { LazyService as LazyServiceInterface } from './lazy-service.contract';

@Injectable()
export class LazyService implements LazyServiceInterface {
  process(msg: string) {
    return `This message is from the lazy service: ${msg}`;
  }
}

app module

@NgModule({
  imports: [BrowserModule,
    RouterModule.forRoot([
      // whatever other routes you have
      {
        path: '?$lazy-service', //some name that will not be used
        loadChildren: 'app/lazy-service/lazy-service.module#LazyServiceModule',
      },
    ])],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

using it inside a component

constructor(
  private loader: NgModuleFactoryLoader,
  private injector: Injector,
) {
}

async loadServiceAndCall() {
  const factory = await this.loader.load('app/lazy-service/lazy-service.module#LazyServiceModule');
  const moduleRef = factory.create(this.injector);
  const service: LazyService = moduleRef.injector.get(LAZY_SERVICE_TOKEN);
  this.value = service.process('"from app.component.ts"')
}