Angular - Get error: Object literal may only specify known properties, and 'appConfig' does not exist in type 'ApplicationConfig'.ts

Question

I'm creating an application to run with Transloco and appear the error:

Object literal may only specify known properties, and 'appConfig' does not exist in type 'ApplicationConfig'.ts(2353)

on appConfig.

The bootstrapApplication with appConfig:

import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, {
  appConfig,
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    importProvidersFrom(IonicStorageModule.forRoot()),
    importProvidersFrom(TranslocoModule)
  ],
});

The appConfig.ts file:

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom(BrowserModule),
        provideHttpClient(),
        provideTransloco({
            config: {
                prodMode: !isDevMode(),
                availableLangs: [
                    { id: 'en-us', label: 'English USA' },
                    { id: 'en', label: 'English' },
                    { id: 'pt-br', label: 'Portuguese Brazil' },
                    { id: 'es', label: 'Spanish' }
                ],
                defaultLang: 'en',
                fallbackLang: 'en-us',
                missingHandler: {
                    useFallbackTranslation: false,
                },
                reRenderOnLangChange: true,
            },
            loader: TranslocoHttpLoader
        }),
        provideTranslocoLocale({
            langToLocaleMapping: {
                en: 'en-US',
                es: 'es-ES',
                'pt-BR': 'pt-BR'
            },
        }),
        provideTranslocoMessageformat(),
    ],
};

When I change the code to the code below the issue does not appear but other fails related to the route appear.

bootstrapApplication(AppComponent, appConfig);

Answer 1

Either you can work with a spread operator (...) and provide appConfig.providers in the providers array for the second argument for the bootstrapApplication method.

bootstrapApplication(AppComponent, {
  providers: [
    ...appConfig.providers,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    importProvidersFrom(IonicStorageModule.forRoot()),
    importProvidersFrom(TranslocoModule)
  ],
});

Or move all the registered services/modules/providers into the appConfig.

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom(BrowserModule),
        provideHttpClient(),
        provideTransloco({
            config: {
                prodMode: !isDevMode(),
                availableLangs: [
                    { id: 'en-us', label: 'English USA' },
                    { id: 'en', label: 'English' },
                    { id: 'pt-br', label: 'Portuguese Brazil' },
                    { id: 'es', label: 'Spanish' }
                ],
                defaultLang: 'en',
                fallbackLang: 'en-us',
                missingHandler: {
                    useFallbackTranslation: false,
                },
                reRenderOnLangChange: true,
            },
            loader: TranslocoHttpLoader
        }),
        provideTranslocoLocale({
            langToLocaleMapping: {
                en: 'en-US',
                es: 'es-ES',
                'pt-BR': 'pt-BR'
            },
        }),
        provideTranslocoMessageformat(),
        {
          provide: RouteReuseStrategy,
          useClass: IonicRouteStrategy
        },
        provideIonicAngular(),
        provideRouter(routes, withPreloading(PreloadAllModules)),
        importProvidersFrom(IonicStorageModule.forRoot()),
        importProvidersFrom(TranslocoModule)
    ],
};

Then, the caller for the bootstrapApplication method should be as below:

bootstrapApplication(AppComponent, appConfig);