How to import TranslateModule from ngx-translate to standalone componet?

Question

My project has translation feature. Used angular version: 16, translation npm package: @ngx-translate/core.

I use standalone components for application.

main.ts:

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { environment } from './environments/environment';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { annoumcementReducer } from './app/shared/store/annoumcement.reducer';
import { EffectsModule } from '@ngrx/effects';
import * as announcementEffects from '../src/app/shared/store/annoumcement.effects';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './app/home/home.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

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

const routes: Routes = [{ path: '', component: HomeComponent }];

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },
  provideHttpClient(),
  importProvidersFrom(RouterModule.forRoot(routes)),
  importProvidersFrom(StoreModule.forRoot({ announcement: annoumcementReducer })),
  importProvidersFrom(EffectsModule.forRoot(announcementEffects)),
  importProvidersFrom(
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  )
];

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, { providers: providers }).catch((err) => console.log(err));

HomeComponent can't be problem becouse its only contains 1 component.

homecomponent:

import { Component } from '@angular/core';
import { AnnouncementFormComponent } from '../pages/announcement-form/announcement-form.component';

@Component({
  selector: 'app-home',
  template: `<app-announcement-form></app-announcement-form>`,
  standalone: true,
  imports: [AnnouncementFormComponent]
})
export class HomeComponent {}

Announcementform have a form, and labels have multiple language like this: {{'title' | translate}}

the component's code:

@Component({
  selector: 'app-announcement-form',
  standalone: true,
  imports: [
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatFormFieldModule,
    MatCheckboxModule,
    MatInputModule,

    NgxMatDatetimePickerModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule,
    FormsModule,
    ReactiveFormsModule,
    SelectDropdownComponent,
    TranslateModule
  ],
  templateUrl: './announcement-form.component.html',
  styleUrls: ['./announcement-form.component.scss']
})
export class AnnouncementFormComponent...

translation works well this way, but i got an error:

ERROR Error: Uncaught (in promise): Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

If I remove TranslateModule from import, the application translate pipe couldn't be found, but there is no error.

What I missed?