Angular 14中ngx-translate无法运行，报logger is undefined错误求助

问题分析 #

升级到 Angular 14 后，ngx-translate 抛出 TypeError: logger is undefined，根源是 TranslateService 初始化时依赖的 Logger 服务未被正确注入，或版本兼容、模块配置存在问题。

解决步骤 #

• 确保版本完全兼容
  虽然你使用的 @ngx-translate/core@14.0.0 和 @ngx-translate/http-loader@7.0.0 理论上适配 Angular 14，但建议升级到对应大版本的最新补丁包，修复已知注入 bug：

  npm install @ngx-translate/core@^14.0.0 --save
  npm install @ngx-translate/http-loader@^7.0.0 --save
  

• 检查 TranslateModule 配置
  仅在根模块（AppModule）中使用 TranslateModule.forRoot()，懒加载模块使用 TranslateModule.forChild()，同时确保正确导入 HttpClientModule：

  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  
  // 翻译文件加载器工厂
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
  }
  
  @NgModule({
    imports: [
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ]
  })
  export class AppModule { }
  

• 确保 Logger 服务被正确提供
  ngx-translate 依赖 Angular 的 Logger 服务，需确保根模块中已导入 BrowserModule 或 CommonModule（二者包含 Logger 服务）。若仍报错，可手动在根模块 providers 中声明：

  import { Logger } from '@angular/common';
  
  @NgModule({
    providers: [Logger]
  })
  export class AppModule { }
  

• 调整 TranslateService 初始化时机
  避免在组件构造函数中调用 setDefaultLang 等方法，移至 ngOnInit 生命周期钩子，确保依赖注入完成：

  import { TranslateService } from '@ngx-translate/core';
  import { OnInit } from '@angular/core';
  
  export class AppComponent implements OnInit {
    constructor(private translate: TranslateService) {}
  
    ngOnInit() {
      this.translate.setDefaultLang('fr'); // 替换为你的默认语言
      this.translate.use('fr');
    }
  }
  

• 清理依赖缓存
  若以上步骤无效，清理 node_modules 和锁文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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