Перевести модуль Angular 10 Не удалось найти канал «translate»

#angular #angular-pipe #ngx-translate

#angular #angular-pipe #ngx-перевести

Вопрос:

это app.module.ts

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {CommonModule} from "@angular/common";

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes),
        CommonModule,
        TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
            }
          })
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}
  

toolbar.component.html здесь я использую translation.

<span>{{'shared.settings' | translate}}</span>

В toolbar.component.ts я импортировал

 import { TranslateService } from '@ngx-translate/core';
  

Я не знаю почему, я получил эту ошибку (я использую Angular 10)

ОШИБКА Ошибка: не удалось найти канал «translate»!

Ответ №1:

Вы должны импортировать TranslateModule (не с forRoot() ) в любом NgModule ToolbarComponent объявленном. Так, например, если он объявлен в своем собственном модуле, вам нужно будет сделать следующее. В противном случае компонент не имеет доступа к каналу:

 @NgModule({
  imports: [
    TranslateModule
  ],
  declarations: [
    ToolbarComponent
  ],
  exports: [
    ToolbarComponent
  ]
})
export class ToolbarModule {}
  

Или, если вы используете a SharedModule , который вы импортируете в несколько других функциональных модулей, что является обычной практикой, вы можете экспортировать TranslateModule , чтобы убедиться, что вам не нужно импортировать его в каждый модуль.

 @NgModule({
  exports: [
    CommonModule,
    TranslateModule
  ]
})
export class SharedModule {}
  

Комментарии:

1. Я внес предложенные изменения, но всегда получаю одну и ту же ошибку

2. я решил добавить "angularCompilerOptions": { "enableIvy": false } в tsconfig.json

3. У меня та же проблема, я перехожу с Angular4 на Angular12

Ответ №2:

Иногда может помочь перезапуск IDE.

Ответ №3:

Этот метод сработал для меня:-

добавьте «angularCompilerOptions»: { «enableIvy»: false } в tsconfig.json