Angular 17独立组件中ngx-translate注入错误求助

问题描述 #

新建Angular 17独立组件项目，计划用ngx-translate实现国际化翻译，已通过npm安装依赖并在App组件、app.config.ts中配置，但运行ng serve时出现如下错误：

Internal server error: R3InjectorError(Standalone[_AppComponent])[_TranslateService -> _TranslateService -> InjectionToken USE_EXTEND -> InjectionToken USE_EXTEND]: 
  NullInjectorError: No provider for InjectionToken USE_EXTEND!
      at NullInjector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1654:27)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at injectInjectorOnly (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1100:40)
      at Module.ɵɵinject (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1106:42)
      at Object.TranslateService_Factory (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@ngx-translate/core/dist/fesm2022/ngx-translate-core.mjs:708:259)
      at eval (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
      at runInInjectorProfilerContext (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:866:9)
      at R3Injector.hydrate (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3082:33) (x2)

作为Angular新手，尝试添加错误提示中缺失的提供者，但每次新增都会触发新错误，页面也显示空白。当前app.config.ts代码如下：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateService, TranslateStore, TranslateFakeCompiler, TranslateParser, TranslateDefaultParser, MissingTranslationHandler, FakeMissingTranslationHandler, USE_DEFAULT_LANG, USE_STORE, USE_EXTEND } from '@ngx-translate/core';
import { HttpLoaderFactory } from './http-loader.factory';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    TranslateService,
    TranslateStore,
    {
      provide: TranslateCompiler,
      useClass: TranslateFakeCompiler
    },
    {
      provide: TranslateParser,
      useClass: TranslateDefaultParser
    },
    {
      provide: MissingTranslationHandler,
      useClass: FakeMissingTranslationHandler,
    },
    {
      provide: USE_DEFAULT_LANG,
      useValue: true,
    },
    {
      provide: USE_STORE,
      useValue: true,
    },
  ]
};

解决方法 #

问题根源是手动注册了过多ngx-translate底层提供者，Angular 17独立组件模式下，无需手动配置TranslateService、TranslateStore等核心服务，也不用自行设置TranslateCompiler、TranslateParser这类默认依赖。正确做法是使用ngx-translate v15+提供的provideTranslate函数统一配置，它会自动处理所有必要的提供者。

步骤1：确认依赖版本兼容性 #

确保安装的ngx-translate包适配Angular 17，执行以下命令更新或安装：

npm install @ngx-translate/core @ngx-translate/http-loader --save

步骤2：简化app.config.ts配置 #

删除所有手动添加的ngx-translate相关提供者，改用provideTranslate统一配置：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, HttpClient } from '@angular/common/http';
import { provideTranslate, TranslateLoader } from '@ngx-translate/core';
import { HttpLoaderFactory } from './http-loader.factory';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    provideTranslate({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en' // 替换为你的默认语言，比如'zh'
    })
  ]
};

步骤3：确认HttpLoaderFactory正确性 #

确保http-loader.factory.ts代码正确，用于加载assets目录下的翻译文件：

import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

步骤4：在App组件中初始化翻译服务 #

在独立的AppComponent中注入TranslateService并完成初始化，同时导入TranslateModule：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, TranslateModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private translate: TranslateService) {}

  ngOnInit(): void {
    this.translate.setDefaultLang('en'); // 设置默认语言
    this.translate.use('en'); // 启用默认语言
  }
}

步骤5：创建翻译文件 #

在src/assets/i18n目录下创建对应语言的翻译文件，例如：

• en.json

{
  "TITLE": "Hello World"
}

• zh.json

{
  "TITLE": "你好世界"
}

步骤6：在模板中使用翻译管道 #

在app.component.html中通过translate管道调用翻译内容：

<h1>{{ 'TITLE' | translate }}</h1>

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