Getting started

@flyze/lib-core-angular 1.0.0-alpha.34· latest

How to add @flyze/lib-core-angular to an Angular app and import the parts you need.

The library ships no forRoot() for itself and no single module to import — each area is opted into separately. This guide covers the prerequisites once and then the per-area entry points.

1. Install

npm install @flyze/lib-core-angular

2. Satisfy the peer dependencies

All of these are peerDependencies, so npm will not install them for you (projects/lib-core-angular/package.json):

Package	Range
`@angular/common` `core` `platform-browser`	`^17.x`
`@angular/cdk`, `@angular/material`	`^17.x`
`@angular/service-worker`	`^17.x`
`@flyze/lib-core`	`^4.0.0-alpha.20`
`@jsverse/transloco`	`^7.5.0`
`rxjs`	`~7.8.1`

@angular/service-worker and @angular/material are required even if you only use, say, the translation pipes — the entry point re-exports everything from one bundle.

3. Configure transloco

Not optional. FyzTranslateService injects TRANSLOCO_TRANSPILER (features/translation-config), FormatDateService and the i18n helpers inject TranslocoService. Without provideTransloco() those services cannot be constructed.

providers: [
    provideTransloco({
        config: {
            availableLangs: ['de', 'en'],
            defaultLang: 'de',
            reRenderOnLangChange: true,
            prodMode: environment.production
        },
        loader: TranslocoHttpLoader
    })
];

Two constraints from the library:

availableLangs must contain only 'de' and 'en' if you inject FormatDateService — anything else throws at construction, see features/format-date.
Set reRenderOnLangChange: true if you use dynamic translation configs, which resolve per active language.

transloco-root.module.ts in the test app is a complete working example, including a loader that serves scoped translations.

4. Import what you use

You want	Import	Kind
`fyzTranslate` / `fyzTransloco` pipes	`FyzTranslateModule`	`NgModule`
`filter`, `advancedFilter`, `safeHtml`, `safeResourceUrl`	`PipesModule`	`NgModule`
`[loadComponent]`	`DynamicComponentModule`	`NgModule`
`fyzMatMenuTrigger`	`FyzMenuTrigger`	standalone directive
`NetworkStatusService`	`NetworkModule`	`NgModule`
PWA services	`PwaModule.forRoot({ … })`	`NgModule`, root only
`FlyzeThemingService`, `FormatDateService`, `FyzTranslateTranslocoConfigService`	nothing	`providedIn: 'root'`

TranslocoRelativeHelperService and MatPaginatorIntlTranslocoService are intentionally not root services — provide them where you use them (features/relative-translation-keys).

@NgModule({
    imports: [FyzTranslateModule, PipesModule, DynamicComponentModule, NetworkModule],
    …
})
export class FeatureModule {}

Note the mixed style: the pipes and directives in the module-based entry points are declared standalone: false and must be reached through their NgModule, while FyzMenuTrigger is standalone and imported as a class. A standalone component therefore imports FyzTranslateModule (the module) and FyzMenuTrigger (the directive) side by side. This inconsistency is historical, not a rule.

5. Load the library’s own translations

If you use MatPaginatorIntlTranslocoService — or see FLYZE_LIB_CORE_ANGULAR.… keys rendered raw — the library’s translation files have to reach your app’s translation assets. See loading-library-translations.