feature(transloco): providers functions

Author: alexfriesen

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,
+    },
+  ];
+}