feat(transloco): 🎸 providers functions

docs/docs/getting-started/installation.mdx

@@ -33,19 +33,21 @@ First, Transloco creates boilerplate files for the requested translations:
 }
 ```
 
-Next, it will create a new file, `transloco-root.module.ts` which exposes an Angular's module with a default configuration, and inject it into the `AppModule`:
+## NgModule Setup
+
+Next, it will create a new file, `transloco-root.module.ts` which exposes an Angular module with a default configuration, and inject it into the `AppModule`:
 
 ```ts title="transloco-root.module.ts"
+import { Injectable, isDevMode, NgModule } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {
- TRANSLOCO_LOADER,
  Translation,
  TranslocoLoader,
- TRANSLOCO_CONFIG,
  translocoConfig,
- TranslocoModule
+ TranslocoModule,
+ provideTranslocoConfig,
+ provideTranslocoLoader
 } from '@ngneat/transloco';
-import { Injectable, isDevMode, NgModule } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
@@ -59,18 +61,17 @@ export class TranslocoHttpLoader implements TranslocoLoader {
 @NgModule({
  exports: [ TranslocoModule ],
  providers: [
- {
- provide: TRANSLOCO_CONFIG,
- useValue: translocoConfig({
+ provideTranslocoConfig(
+ translocoConfig({
  availableLangs: ['en', 'es'],
  defaultLang: 'en',
  // Remove this option if your application
  // doesn't support changing language in runtime.
  reRenderOnLangChange: true,
  prodMode: !isDevMode(),
  })
- },
- { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
+ ),
+ provideTranslocoLoader(TranslocoHttpLoader)
  ]
 })
 export class TranslocoRootModule {}
@@ -95,6 +96,49 @@ getTranslation(langPath: string) {
 :::
 And that's it! Now we are ready to use it in our project.
 
+## Standalone Setup
+
+Add the `provideTransloco` function to your `main.ts` and pass in your configuration.
+
+```ts title="main.ts"
+import {inject, Injectable, isDevMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
+import {
+ Translation,
+ TranslocoLoader,
+ translocoConfig,
+ provideTransloco,
+} from '@ngneat/transloco';
+import { AppComponent } from './app/app.component';
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+ private http = inject(HttpClient);
+
+ getTranslation(lang: string) {
+ return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
+ }
+}
+
+bootstrapApplication(AppComponent, {
+ providers: [
+ provideHttpClient(),
+ provideTransloco({
+ config: translocoConfig({
+ availableLangs: ['en', 'es'],
+ defaultLang: 'en',
+ // Remove this option if your application
+ // doesn't support changing language in runtime.
+ reRenderOnLangChange: true,
+ prodMode: !isDevMode(),
+ }),
+ loader: TranslocoHttpLoader,
+ })
+ ]
+});
+```
+
 ## Angular & Transloco versions
 
 Make sure you install the version corresponding to your Angular version:

libs/transloco/src/index.ts

@@ -1,7 +1,11 @@
-export { translate, translateObject, TranslocoService } from './lib/transloco.service';
+export {
+ translate,
+ translateObject,
+ TranslocoService,
+} from './lib/transloco.service';
 export { TranslocoDirective } from './lib/transloco.directive';
 export { TranslocoPipe } from './lib/transloco.pipe';
-export { TranslocoModule, defaultProviders } from './lib/transloco.module';
+export { TranslocoModule } from './lib/transloco.module';
 export { TRANSLOCO_LOADER, TranslocoLoader } from './lib/transloco.loader';
 export {
  TranslocoConfig,
@@ -44,3 +48,10 @@ export { getBrowserCultureLang, getBrowserLang } from './lib/browser-lang';
 export { getPipeValue, getLangFromScope, getScopeFromLang } from './lib/shared';
 export * from './lib/types';
 export * from './lib/helpers';
+export { 
+ defaultProviders,
+ provideTransloco,
+ provideTranslocoConfig,
+ provideTranslocoLoader,
+ provideTranslocoScope,
+} from './lib/transloco.providers';

libs/transloco/src/lib/transloco-testing.module.ts

@@ -9,7 +9,8 @@ import {
 import { TRANSLOCO_LOADER, TranslocoLoader } from './transloco.loader';
 import { HashMap, Translation } from './types';
 import { Observable, of } from 'rxjs';
-import { defaultProviders, TranslocoModule } from './transloco.module';
+import { TranslocoModule } from './transloco.module';
+import { defaultProviders } from './transloco.providers';
 import {
  TRANSLOCO_CONFIG,
  TranslocoConfig,

libs/transloco/src/lib/transloco.config.ts

@@ -1,5 +1,5 @@
-import { InjectionToken, Provider } from '@angular/core';
-import { AvailableLangs, HashMap } from './types';
+import { InjectionToken } from '@angular/core';
+import { AvailableLangs } from './types';
 
 export interface TranslocoConfig {
  defaultLang: string;

libs/transloco/src/lib/transloco.module.ts

@@ -1,49 +1,12 @@
 import { NgModule } from '@angular/core';
 import { TranslocoLoaderComponent } from './loader-component.component';
 import { TranslocoDirective } from './transloco.directive';
-import {
- DefaultTranspiler,
- TRANSLOCO_TRANSPILER,
-} from './transloco.transpiler';
+import { defaultProviders } from './transloco.providers';
 import { TranslocoPipe } from './transloco.pipe';
-import {
- DefaultHandler,
- TRANSLOCO_MISSING_HANDLER,
-} from './transloco-missing-handler';
-import {
- DefaultInterceptor,
- TRANSLOCO_INTERCEPTOR,
-} from './transloco.interceptor';
-import {
- DefaultFallbackStrategy,
- TRANSLOCO_FALLBACK_STRATEGY,
-} from './transloco-fallback-strategy';
-import { TRANSLOCO_CONFIG } from './transloco.config';
-
-export const defaultProviders = [
- {
- provide: TRANSLOCO_TRANSPILER,
- useClass: DefaultTranspiler,
- deps: [TRANSLOCO_CONFIG],
- },
- {
- provide: TRANSLOCO_MISSING_HANDLER,
- useClass: DefaultHandler,
- },
- {
- provide: TRANSLOCO_INTERCEPTOR,
- useClass: DefaultInterceptor,
- },
- {
- provide: TRANSLOCO_FALLBACK_STRATEGY,
- useClass: DefaultFallbackStrategy,
- deps: [TRANSLOCO_CONFIG],
- },
-];
 
 @NgModule({
-  declarations: [TranslocoDirective, TranslocoPipe, TranslocoLoaderComponent],
-  providers: [defaultProviders],
-  exports: [TranslocoDirective, TranslocoPipe]
+ declarations: [TranslocoDirective, TranslocoPipe, TranslocoLoaderComponent],
+ providers: [defaultProviders],
+ exports: [TranslocoDirective, TranslocoPipe],
 })
 export class TranslocoModule {}

libs/transloco/src/lib/transloco.providers.ts

@@ -0,0 +1,85 @@
+import { Provider, Type } from '@angular/core';
+
+import { TRANSLOCO_LOADER, TranslocoLoader } from './transloco.loader';
+import { TRANSLOCO_CONFIG, TranslocoConfig } from './transloco.config';
+import { TRANSLOCO_SCOPE } from './transloco-scope';
+import { TranslocoScope } from './types';
+
+import {
+ DefaultTranspiler,
+ TRANSLOCO_TRANSPILER,
+} from './transloco.transpiler';
+import {
+ DefaultHandler,
+ TRANSLOCO_MISSING_HANDLER,
+} from './transloco-missing-handler';
+import {
+ DefaultInterceptor,
+ TRANSLOCO_INTERCEPTOR,
+} from './transloco.interceptor';
+import {
+ DefaultFallbackStrategy,
+ TRANSLOCO_FALLBACK_STRATEGY,
+} from './transloco-fallback-strategy';
+
+export const defaultProviders = [
+ {
+ provide: TRANSLOCO_TRANSPILER,
+ useClass: DefaultTranspiler,
+ deps: [TRANSLOCO_CONFIG],
+ },
+ {
+ provide: TRANSLOCO_MISSING_HANDLER,
+ useClass: DefaultHandler,
+ },
+ {
+ provide: TRANSLOCO_INTERCEPTOR,
+ useClass: DefaultInterceptor,
+ },
+ {
+ provide: TRANSLOCO_FALLBACK_STRATEGY,
+ useClass: DefaultFallbackStrategy,
+ deps: [TRANSLOCO_CONFIG],
+ },
+];
+
+type TranslocoOptions = {
+ config?: TranslocoConfig;
+ loader?: Type<TranslocoLoader>;
+};
+
+export function provideTransloco(options: TranslocoOptions) {
+ const providers: Provider[] = [...defaultProviders];
+
+ if (options.config) {
+ providers.push(...provideTranslocoConfig(options.config));
+ }
+
+ if (options.loader) {
+ providers.push(...provideTranslocoLoader(options.loader));
+ }
+
+ return providers;
+}
+
+export function provideTranslocoConfig(config: TranslocoConfig) {
+ return [
+ {
+ provide: TRANSLOCO_CONFIG,
+ useValue: config,
+ },
+ ];
+}
+
+export function provideTranslocoLoader(loader: Type<TranslocoLoader>) {
+ return [{ provide: TRANSLOCO_LOADER, useClass: loader }];
+}
+
+export function provideTranslocoScope(scope: TranslocoScope) {
+ return [
+ {
+ provide: TRANSLOCO_SCOPE,
+ useValue: scope,
+ },
+ ];
+}