TRANSLOCO ISSUE: TranslocoService -> InjectionToken TRANSLOCO_TRANSPILER -> InjectionToken TRANSLOCO_TRANSPILER]:

208 Views Asked by At

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!

0

There are 0 best solutions below