NullInjectorError, Standalone, No provider for _TranslateService Angular 17

Question

Just like in the title. I have a problem with TranslateService when using angular 17.I only use components. And when I try to use TranslateService, I'm getting this error:

`main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_TranslateService -> _TranslateService -> _TranslateService]: 
  NullInjectorError: No provider for _TranslateService!
    at NullInjector.get (core.mjs:1654:27)
    at R3Injector.get (core.mjs:3093:33)
    at R3Injector.get (core.mjs:3093:33)
    at R3Injector.get (core.mjs:3093:33)
    at ChainedInjector.get (core.mjs:15265:36)
    at lookupTokenUsingModuleInjector (core.mjs:5730:39)
    at getOrCreateInjectable (core.mjs:5778:12)
    at Module.ɵɵdirectiveInject (core.mjs:10548:19)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:28:26)
    at getNodeInjectable (core.mjs:5984:44)`

And this is my code:

import { Component, importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, HttpClientModule, provideHttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { HomeComponent } from './pages/home/home.component';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    HomeComponent,
    HttpClientModule,
    CommonModule,
    TranslateModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

export class AppComponent {

  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    if (browserLang !== undefined) {
      translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    } else {
      translate.use('en');
    }
  }
}

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        }
      })
    )
  ]
})

I believe the issue might be related to the configuration of TranslateModule or the initialization of TranslateService. Could someone assist me in resolving this issue by providing insights or potential solutions?

Answer 1

I’ve encountered similar issue, despite having it all set up, I realized what i lack is the correct version of "@ngx-translate/core" and "@ngx-translate/http-loader" it should be up to date try changing yours respectively.

On file app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { HttpClient } from '@angular/common/http';

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

Inside….

@NgModule({
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ]
})

on your package.json try using version 14 or 15 for core and 7 or 8 for http-loader

"@ngx-translate/core": "^15.0.0",

"@ngx-translate/http-loader": "8.0.0",