NullInjectorError，独立，没有 _TranslateService Angular 17 的提供者

Question

就像标题一样。我在使用 Angular 17 时遇到 TranslateService 问题。我只使用组件。当我尝试使用 TranslateService 时， 我收到此错误：

`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)`

这是我的代码：

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

我认为该问题可能与 TranslateModule 的配置或 TranslateService 的初始化有关。有人可以通过提供见解或潜在的解决方案来帮助我解决这个问题吗？

Answer 1

我遇到了类似的问题，尽管已经全部设置完毕，但我意识到我缺少的是正确的版本

"@ngx-translate/core"

和

"@ngx-translate/http-loader"

它应该是最新的，尝试分别更改你的版本。

在文件 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/');
}

里面……

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