### Internationalization Setup in Angular (TypeScript & JSON) Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt Implements internationalization using ngx-translate with MessageFormat compiler. Translations are stored in JSON files and loaded during application initialization, supporting complex formatting like plurals and gender selection. ```json // src/translations.json { "APP": { "TITLE": "My sample app" }, "WELCOME": { "MESSAGE": "Welcome, {username}!", "ITEMS": "{count, plural, =0{No items} =1{One item} other{# items}}" } } ``` ```typescript // Usage in component import { Component, OnInit } from '@angular/core'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-example', template: `

{{ 'APP.TITLE' | translate }}

{{ 'WELCOME.MESSAGE' | translate:{ username: userName } }}

{{ 'WELCOME.ITEMS' | translate:{ count: itemCount } }}

`, imports: [TranslateModule] }) export class ExampleComponent implements OnInit { userName = 'John'; itemCount = 5; constructor(private translateService: TranslateService) {} ngOnInit() { // Get instant translation in TypeScript const title = this.translateService.instant('APP.TITLE'); console.log(title); // Output: "My sample app" // With parameters const welcome = this.translateService.instant('WELCOME.ITEMS', { count: 0 }); console.log(welcome); // Output: "No items" } } ``` -------------------------------- ### Angular Root Component Setup Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt The AppComponent serves as the application's entry point, managing the shell, page titles, translations, and navigation loading state. It uses OnPush change detection for performance and is decorated with @UntilDestroy for resource management. ```typescript import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Router, RouterOutlet, ActivationStart, NavigationStart, NavigationEnd } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import * as translations from '../translations.json'; @UntilDestroy() @Component({ selector: 'app-root', templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterOutlet], }) export class AppComponent implements OnInit { @HostBinding('class.cds-display-block') readonly cdsDisplay = true; @HostBinding('class.h-100') fullHeight = true; loading: boolean = false; username: string = ''; constructor( private readonly router: Router, private readonly titleService: Title, private readonly translateService: TranslateService, ) {} ngOnInit(): void { // Setup translations this.translateService.setTranslation('en', translations); // Setup dynamic page title based on route data const appTitle = this.translateService.instant('APP.TITLE'); this.titleService.setTitle(appTitle); this.router.events.pipe(untilDestroyed(this)).subscribe((data) => { if (data instanceof ActivationStart) { const pageTitle = data.snapshot.data?.['title']; this.titleService.setTitle(pageTitle ? `${appTitle} > ${pageTitle}` : appTitle); } }); // Track navigation loading state this.router.events.pipe(untilDestroyed(this)).subscribe((event) => { if (event instanceof NavigationStart) { this.loading = true; } else if (event instanceof NavigationEnd) { this.loading = false; } }); } } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Configure Angular Application Providers Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt Defines the application-wide providers for an Angular application, including HTTP client setup, state management with NGXS, internationalization with ngx-translate, animations, and routing. It centralizes dependency injection configuration and sets up error handling interceptors and route reuse strategies. ```typescript import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; import { provideStore, NoopNgxsExecutionStrategy } from '@ngxs/store'; import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin'; import { provideTranslateService, TranslateCompiler } from '@ngx-translate/core'; import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'; import { provideAnimations } from '@angular/platform-browser/animations'; import { RouteReuseStrategy } from '@angular/router'; import { environment } from '@env/environment'; import { appRoutes } from './app.routes'; import { errorHandlerInterceptor } from './core/http/error-handler.interceptor'; import { RouteReusableStrategy } from './core/router/route-reusable-strategy'; export const appConfig: ApplicationConfig = { providers: [ provideAnimations(), provideHttpClient(withInterceptors([errorHandlerInterceptor])), provideStore( [], { developmentMode: !environment.production, executionStrategy: NoopNgxsExecutionStrategy }, withNgxsReduxDevtoolsPlugin({ disabled: environment.production, maxAge: 50 }), ), provideTranslateService({ compiler: { provide: TranslateCompiler, useClass: TranslateMessageFormatCompiler }, defaultLanguage: 'en', }), provideZoneChangeDetection({ eventCoalescing: true }), { provide: RouteReuseStrategy, useClass: RouteReusableStrategy }, provideRouter(appRoutes, withPreloading(PreloadAllModules)), ], }; // Usage in main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { appConfig } from './app/app.config'; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Environment Configuration for Angular (TypeScript) Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt Defines environment-specific settings like production flags, API endpoints, and supported locales. Configuration is managed in separate files (e.g., environment.ts, environment.prod.ts) and can be imported using TypeScript path aliases. ```typescript // src/environments/environment.ts (development) export const environment = { production: false, version: 'dev', serverUrl: '', defaultLanguage: 'en-US', supportedLanguages: ['en-US', 'fr-FR'], }; // src/environments/environment.prod.ts (production) export const environment = { production: true, version: '1.0.0', serverUrl: 'https://api.production.com', defaultLanguage: 'en-US', supportedLanguages: ['en-US', 'fr-FR'], }; // Usage: Import from @env alias configured in tsconfig import { environment } from '@env/environment'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ApiService { private baseUrl = environment.serverUrl; getEndpoint(path: string): string { return `${this.baseUrl}${path}`; } isProduction(): boolean { return environment.production; } } ``` -------------------------------- ### Angular Application Routing with Fallback (TypeScript) Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt Configures application routes, including wildcard fallback routes for handling undefined paths. Supports basic redirection and expanded configurations with lazy-loaded components and custom data properties. ```typescript import { Routes } from '@angular/router'; export const appRoutes: Routes = [ { path: '', children: [ { path: '**', redirectTo: 'home' }, ], }, { path: '**', redirectTo: 'home' }, // Fallback when no prior route is matched ]; // Example: Expanded configuration with lazy loading export const appRoutesExpanded: Routes = [ { path: '', children: [ { path: 'home', loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent), data: { title: 'Home' } }, { path: 'about', loadComponent: () => import('./features/about/about.component').then(m => m.AboutComponent), data: { title: 'About', reuse: true } }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', redirectTo: 'home' }, ], }, ]; ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Angular HTTP Error Handler Interceptor Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt A functional HTTP interceptor that globally catches and handles HTTP errors. It logs errors in development mode and propagates them, ensuring centralized error management for all HTTP requests. Dependencies include RxJS operators and Angular's HttpClient. ```typescript import { HttpInterceptorFn, HttpEvent } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { environment } from '@env/environment'; export const errorHandlerInterceptor: HttpInterceptorFn = (request, next) => { return next(request).pipe(catchError((error: unknown) => errorHandler(error))); }; const errorHandler = (response: unknown): Observable> => { if (!environment.production) { console.error('Request error', response); } return throwError(() => response); }; // Usage: Automatically applied via provideHttpClient in app.config.ts // All HTTP requests will be automatically intercepted import { HttpClient } from '@angular/common/http'; import { inject } from '@angular/core'; class MyService { private http = inject(HttpClient); getData() { // Errors will be caught and logged by the interceptor return this.http.get('/api/data').subscribe({ next: (data) => console.log('Success:', data), error: (err) => console.log('Error handled:', err), }); } } ``` -------------------------------- ### Angular Route Reuse Strategy Configuration Source: https://context7.com/kevinlourencodev/poc-builder-angular/llms.txt A custom RouteReuseStrategy that allows explicit route reuse based on route data configuration. This is useful for optimizing navigation performance by preventing unnecessary component destruction and recreation. It requires defining a 'reuse' property in route data. ```typescript import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'; @Injectable() export class RouteReusableStrategy extends RouteReuseStrategy { shouldDetach(): boolean { return false; } store(): void {} shouldAttach(): boolean { return false; } retrieve(): DetachedRouteHandle | null { return null; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig || future.data['reuse']; } } // Usage: Define routes with reuse option import { Routes } from '@angular/router'; export const appRoutes: Routes = [ { path: 'dashboard', component: DashboardComponent, data: { reuse: true } // Component will be reused when navigating back }, { path: 'profile', component: ProfileComponent // No reuse flag - component will be destroyed and recreated } ]; ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.