Angular升级后出现Transloco TRANSLOCO_TRANSPILER注入错误求助

问题分析 #

升级Angular后出现NullInjectorError: R3InjectorError(...) -> TRANSLOCO_TRANSPILER错误，且未自定义过转译器，核心原因是：

• Angular版本升级后，@ngneat/transloco版本不兼容，导致默认转译器未被正确注册
• Standalone模式下，Transloco的默认依赖（如转译器）需要手动显式提供，而非自动导入

解决方案 #

1. 确认Transloco与Angular版本兼容 #

执行以下命令查看当前Transloco版本：

npm list @ngneat/transloco

确保版本与你的Angular版本匹配（例如Angular 16+对应Transloco 6.x及以上版本），若不兼容，升级Transloco到对应版本：

npm install @ngneat/transloco@latest

2. 显式提供默认转译器 #

修改transloco.provider.ts，导入并添加默认转译器的提供者：

import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
// 新增导入
import { TRANSLOCO_CONFIG, TRANSLOCO_LOADER, TRANSLOCO_TRANSPILER, DEFAULT_TRANSLOCO_TRANSPILER, 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 : TRANSLOCO_CONFIG,
            useValue: translocoConfig({
                availableLangs      : [
                    {
                        id   : 'en',
                        label: 'English',
                    },
                    {
                        id   : 'br',
                        label: 'Português',
                    },
                ],
                defaultLang         : 'br',
                fallbackLang        : 'en',
                reRenderOnLangChange: true,
                prodMode            : true,
            }),
        },
        {
            provide : TRANSLOCO_LOADER,
            useClass: TranslocoHttpLoader,
        },
        // 新增默认转译器提供者
        {
            provide: TRANSLOCO_TRANSPILER,
            useValue: DEFAULT_TRANSLOCO_TRANSPILER
        },
        {
            provide   : APP_INITIALIZER,
            useFactory: () =>
            {
                const translocoService = inject(TranslocoService);
                const defaultLang = translocoService.getDefaultLang();
                translocoService.setActiveLang(defaultLang);

                return () => translocoService.load(defaultLang).toPromise();
            },
            multi     : true,
        },
    ];
};

3. 清理依赖缓存 #

删除node_modules、package-lock.json（或yarn.lock），重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 检查@fuse/angular的依赖冲突 #

由于使用了@fuse/angular主题框架，确认其依赖的Transloco版本与你项目中的版本一致，若存在冲突，可通过npm overrides强制统一版本：
在package.json中添加：

"overrides": {
  "@ngneat/transloco": "^6.0.0" // 替换为你使用的兼容版本
}

然后重新安装依赖。

内容的提问来源于stack exchange，提问作者Alcure