Lazy Load Module

Overview

As the application is growing, certain modules will be defined as the lazy module. In that situation, the translation and patterns could be loaded as lazy mode to enhance performance. The Singleton Angular client provides this option to load translation and patterns along with lazy module. Using the ‘forChild’ API to initialize the Singleton module, thus the lazy module will use the separated Singleton services instances created by its own injector.

The following example is the most recommended usage based on non-blocking data loading. Still, it requires subscribing to the stream to ensure that the data has been loaded when consuming synchronous APIs. If you don’t want to implement live locale switching or are concerned about subscribing to the stream event, you can load data in a blocking way through I18nDataGuard in the corresponding route and then use synchronous APIs directly. More details, please refer to Data initialization.

Example

// lazy.module.ts
...
import { VIPModule } from '@singleton-i18n/angular-client';

@NgModule({
    ...
    imports: [
        ...
        VIPModule.forChild()
    ],
    ...
})

export class LazyModule {
    constructor(private service: VIPService) {
    // In the simplified configuration of lazy loading module, 
    // only the component name is required, and other fields are optional.
        service.initLazyModuleData({
            component: 'default',
            sourceBundles: [ENGLISH]
        });
    }
}

// sample.component.ts

import { L10nService, I18nService, VIPService } from '@singleton-i18n/angular-client';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'sample',
    templateUrl: './sample.component.html'
})
export class SampleComponent implements OnInit, OnDestroy {
    subscription: any;
    constructor(private l10nService: L10nService, private i18nService: I18nService, private vipService: VIPService) { }

    ngOnInit() {
        this.subscription = this.vipService.stream.subscribe((locale: string) => {
            this.translation = this.l10nService.getMessage('Singleton.description', [ 'Singleton for Angular client' ], locale);
            this.date = this.i18nService.formatDate(new Date(), 'short', locale );
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
        this.subscription = undefined;
    }
}