I'm getting this error on my app: ERROR NullInjectorError: R3InjectorError(Environment Injector)[ApplicationInitStatus -> InjectionToken Application Initializer -> [object Object] -> TranslocoService -> InjectionToken TRANSLOCO_TRANSPILER -> InjectionToken TRANSLOCO_TRANSPILER]:
I've searched EVERYTHING on my project and couldn't find any custom transpiler, neither TRANSLOCO_TRANSPILER on my code. So, i've tried several times and i'm still getting this error and now i really need help, because i couldn't solve it on my own!
transloco.provider.ts:
import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
import { TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
export const provideTransloco = (): Array<Provider | EnvironmentProviders> =>
{
return [
importProvidersFrom(TranslocoModule),
{
// Provide the default Transloco configuration
provide : TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs : [
{
id : 'en',
label: 'English',
},
{
id : 'br',
label: 'Português',
},
],
defaultLang : 'br',
fallbackLang : 'en',
reRenderOnLangChange: true,
prodMode : true,
}),
},
{
// Provide the default Transloco loader
provide : TRANSLOCO_LOADER,
useClass: TranslocoHttpLoader,
},
{
// Preload the default language before the app starts to prevent empty/jumping content
provide : APP_INITIALIZER,
useFactory: () =>
{
const translocoService = inject(TranslocoService);
const defaultLang = translocoService.getDefaultLang();
translocoService.setActiveLang(defaultLang);
return () => translocoService.load(defaultLang).toPromise();
},
multi : true,
},
];
};
transloco.config.d.ts:
import { InjectionToken } from '@angular/core';
import { AvailableLangs } from './types';
export interface TranslocoConfig {
defaultLang: string;
reRenderOnLangChange: boolean;
prodMode: boolean;
fallbackLang?: string | string[];
failedRetries: number;
availableLangs: AvailableLangs;
flatten: {
aot: boolean;
};
missingHandler: {
logMissingKey: boolean;
useFallbackTranslation: boolean;
allowEmpty: boolean;
};
interpolation: [string, string];
}
export declare const TRANSLOCO_CONFIG: InjectionToken<TranslocoConfig>;
export declare const defaultConfig: TranslocoConfig;
type DeepPartial<T> = T extends Array<any> ? T : T extends object ? {
[P in keyof T]?: DeepPartial<T[P]>;
} : T;
export type PartialTranslocoConfig = DeepPartial<TranslocoConfig>;
export declare function translocoConfig(config?: PartialTranslocoConfig): TranslocoConfig;
export {};
app.config.ts:
import { provideHttpClient } from "@angular/common/http";
import { ApplicationConfig } from "@angular/core";
import { LuxonDateAdapter } from "@angular/material-luxon-adapter";
import { DateAdapter, MAT_DATE_FORMATS } from "@angular/material/core";
import { provideAnimations } from "@angular/platform-browser/animations";
import { PreloadAllModules, provideRouter, withInMemoryScrolling, withPreloading } from "@angular/router";
import { provideFuse } from "@fuse";
import { appRoutes } from "app/app.routes";
import { provideAuth } from "app/core/auth/auth.provider";
import { provideIcons } from "app/core/icons/icons.provider";
import { provideTransloco } from "app/core/transloco/transloco.provider";
import { mockApiServices } from "app/mock-api";
export const appConfig: ApplicationConfig = {
providers: [
provideAnimations(),
provideHttpClient(),
provideRouter(appRoutes, withPreloading(PreloadAllModules), withInMemoryScrolling({ scrollPositionRestoration: "enabled" })),
// Material Date Adapter
{
provide: DateAdapter,
useClass: LuxonDateAdapter,
},
{
provide: MAT_DATE_FORMATS,
useValue: {
parse: {
dateInput: "D",
},
display: {
dateInput: "DDD",
monthYearLabel: "LLL yyyy",
dateA11yLabel: "DD",
monthYearA11yLabel: "LLLL yyyy",
},
},
},
// Transloco Config
provideTransloco(),
// Fuse
provideAuth(),
provideIcons(),
provideFuse({
mockApi: {
delay: 0,
services: mockApiServices,
},
fuse: {
layout: "enterprise",
scheme: "light",
screens: {
sm: "600px",
md: "960px",
lg: "1280px",
xl: "1440px",
},
theme: "theme-default",
themes: [
{
id: "theme-default",
name: "Default",
},
{
id: "theme-brand",
name: "Brand",
},
{
id: "theme-teal",
name: "Teal",
},
{
id: "theme-rose",
name: "Rose",
},
{
id: "theme-purple",
name: "Purple",
},
{
id: "theme-amber",
name: "Amber",
},
],
},
}),
],
};
Any clue how can i solve this? I'm also using @fuse/angular as theme.
I've updated my angular version so suddenly everything stopped working!