为什么我收到错误“对象文字可能只指定已知属性，并且‘ApplicationConfig’.ts 类型中不存在‘appConfig’？

Question

我正在创建一个应用程序来与 transloco 一起运行，并出现错误“对象文字可能只指定已知属性，并且 appConfig 上的类型 'ApplicationConfig'.ts(2353) 中不存在'appConfig'”。

带有 appConfig 的 bootstrapApplication

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

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

appConfig.ts 文件

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(),
    ],
};

当我将代码更改为下面的代码时，问题不会出现，但会出现与路线相关的其他失败。

bootstrapApplication(AppComponent, appConfig);

Answer 1

您可以使用展开运算符 (

...

) 并在

appConfig.providers

数组中提供

providers

作为

bootstrapApplication

方法的第二个参数。

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

或者将所有已注册的服务/模块/提供商移至

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)
    ],
};

那么，

bootstrapApplication

方法的调用者应该如下：

bootstrapApplication(AppComponent, appConfig);