Lazy Loading Akita Stores in Angular Modules

Showcase how to lazily load Akita stores in feature modules of an Angular application to optimize performance and scalability.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyFeatureComponent } from './my-feature.component';

const routes: Routes = [
  {
    path: '',
    component: MyFeatureComponent,
    loadChildren: () => import('./+state/my-feature.store.module').then(m => m.MyFeatureStoreModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyFeatureRoutingModule { }

This Angular routing module lazily loads the MyFeatureStoreModule when the MyFeatureComponent route is activated. The Akita store is part of the feature module, which is loaded on demand.

import { NgModule } from '@angular/core';
import { AkitaNgEffectsModule } from '@datorama/akita-ng-effects';
import { MyFeatureStore } from './my-feature.store';
import { MyFeatureService } from './my-feature.service';
import { MyFeatureEffects } from './my-feature.effects';

@NgModule({
  providers: [MyFeatureStore, MyFeatureService],
  imports: [AkitaNgEffectsModule.forFeature([MyFeatureEffects])]
})
export class MyFeatureStoreModule { }

MyFeatureStoreModule is an Angular module that provides the MyFeatureStore and MyFeatureService. It also imports AkitaNgEffectsModule for feature-level effects, which are part of Akita's store ecosystem.