I’m creating an APP 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 not appear but other fails related to route appear.
bootstrapApplication(AppComponent, appConfig);
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);