Creating lazy-loaded modules

Lazy-loaded modules typically correspond to features. It is recommended that the features in these modules are added to a folder called features.

The recommended structure of the repository for lazy-loaded modules and for the shared and core modules and their i18n folders is:

<git repo name. For example, buc-custom-app-starter>
    - src
        - app
            - core <Optional. Contains core services, if any, that are required for the application>
            - features
                - home
                    - homepage1
                    - homepage2
            - shared <Optional. Contains shared components and business services, if any, for the application>
        - assets
            - buc-custom-app-starter
                - i18n
                    - core
                        - en.json
                    - home
                        - homepage1
                            - en.json
                        - homepage2
                            - en.json
                    - shared
                        - en.json
                    - en.json

Steps 2 and 4 in Configuring the root module of the application provide the configurations to follow for feature modules. However, there are the following differences between the configurations for the lazy-loaded module and the main app.module:

For Step 2. The module class name for the lazy-loaded module must extend BucCommonClassesAllModuleClazz.
However, in case of a lazy-loaded module, only one parameter, namely, translationService, must be passed to constructor() and super().
For Step 4. The TranslateModule.forChild() method must be called instead of TranslateModule.forRoot().

Sample content for a lazy-loaded module, HomeModule (home.module.ts)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClientModule } from '@angular/common/http';
import { HomeRoutingModule } from './home-routing.module';

import { TranslateService } from '@ngx-translate/core';
import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import {
    BucCommonClassesAllModuleClazz,
    BucMultiTranslateHttpLoader
} from '@buc/svc-angular';

import { Homepage1Component } from './homepage1/homepage1.component';
import { Homepage2Component } from './homepage2/homepage2.component';

export class BucCustomAppStarterHomeModuleBundles {
    static bundles: Array<any> = [{
        prefix: './assets/buc-custom-app-starter/i18n/home/homepage1/',
        suffix: '.json'
    },
    {
        prefix: './assets/buc-custom-app-starter/i18n/home/homepage2/',
        suffix: '.json'
    }];
}

export function bucCustomAppStarterHomeModuleHttpLoaderFactory(http: HttpClient) {
    return new BucMultiTranslateHttpLoader(http, BucCustomAppStarterHomeModuleBundles.bundles);
}

@NgModule({
    declarations: [
        Homepage1Component,
        Homepage2Component
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: bucCustomAppStarterHomeModuleHttpLoaderFactory,
                deps: [HttpClient]
            },
            isolate: true
        }),
        HomeRoutingModule
    ],
    providers: [],
    entryComponents: []
})
export class HomeModule extends BucCommonClassesAllModuleClazz {
    constructor(translateService: TranslateService) {
        super(translateService);
    }
}

Sample content for a router for a lazy-loaded module, HomeRoutingModule (home-routing.module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Homepage1Component } from './homepage1/homepage1.component';
import { Homepage2Component } from './homepage2/homepage2.component';

const routes: Routes = [
    {
        path: 'homepage1',
        component: Homepage1Component,
    },
    {
        path: 'homepage2',
        component: Homepage2Component,
    },
    {
        path: '',
        redirectTo: 'homepage1',
        pathMatch: 'full'
    }
];

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