Configuration of lazy loaded modules

The translation files of a lazy loaded module are loaded with the module only if the route definition of the module contains the LoadTranslationGuard. The name of the section group must be equal to the route path by default.

Let's take the following routes:

const routes: Routes = [
  ...
  { path: 'spring',
    loadChildren: () => import('./spring/spring.module').then(m => m.SpringModule) },
  { path: 'summer',
    loadChildren: () => import('./summer/summer.module').then(m => m.SummerModule),
    canLoad: [ LoadTranslationsGuard ] },
  { path: 'autumn',
    loadChildren: () => import('./autumn/autumn.module').then(m => m.AutumnModule),
    canLoad: [ LoadTranslationsGuard ] },
  { path: 'winter',
    loadChildren: () => import('./winter/winter.module').then(m => m.WinterModule),
    canLoad: [ LoadTranslationsGuard ],
    data: { translationGroup: 'frosty' } },
  ...
];

...and this section configuration:

const ngtConfig: TranslationConfig = {
  ...
  sections: {
    'app', 'shared', 'spring',
    { group: 'summer', items: [ 'summer' ] },
    { group: 'autumn', items: [ { name: 'fall', alias: 'autumn' } ] },
    { group: 'frosty', items: [ 'december', 'january', 'february' ],
        path: '/assets/i18n/months/{section}.{language}.po' }
  },
  ...
}

The translation file of the spring module is loaded eagerly, i.e. at the start of the application.

The translation file of the summer module is loaded lazy, i.e. at the same time when the module is loaded.

The translation file of the autumn module is loaded lazy, however, the file name does not match the route name (and the module name). The translation keys still use the module name defined by the alias property.

The translation files of the winter module are loaded lazy, nevertheless from a different path, and the file group is identified by a name other than the route path.