0

Estoy con un servicio de traducción para Angular 6. Todo funciona correctamente hasta que intento traduccir el header o el sidebar, que entonces me da este error.

Error: Template parse errors:
The pipe 'translate' could not be found ("="false">    <i class="mdi mdi-calendar-blank"></i><span class="hide-menu">{{ [ERROR ->]'menuAgenda' | translate }}

                    </span>

                </a>
"): ng:///SharedModule/SidebarComponent.html@23:89

El contenido de las páginas las tengo en un PagesModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { PAGES_ROUTES } from './pages.routes';
import { HttpClientModule } from '@angular/common/http';

import { SharedModule } from '../pages/shared/shared.module';

import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProgressComponent } from './progress/progress.component';
import { Graficas1Component } from './graficas1/graficas1.component';
import { SolicitudComprasComponent } from './solicitud-compras/solicitud-compras.component';
import { SolicitudEquipoClinicaComponent } from './solicitud-equipo-clinica/solicitud-equipo-clinica.component';
import { ReunionPeriodicaComponent } from './reunion-periodica/reunion-periodica.component';
import { RevisionSalarialComponent } from './revision-salarial/revision-salarial.component';
import { EvaluacionDesempenoComponent } from './evaluacion-desempeno/evaluacion-desempeno.component';
import { TranslateService } from '../translate.service';
import { TranslatePipe } from '../translate.pipe';
export function setupTranslateFactory(
  service: TranslateService): Function {
  return () => service.use('es');
}

@NgModule({
  declarations: [
    PagesComponent,
    TranslatePipe,
    DashboardComponent,
    ProgressComponent,
    Graficas1Component,
    SolicitudComprasComponent,
    SolicitudEquipoClinicaComponent,
    ReunionPeriodicaComponent,
    RevisionSalarialComponent,
    EvaluacionDesempenoComponent
  ],
  exports: [
    PagesComponent,
    DashboardComponent,
    ProgressComponent,
    Graficas1Component,
    TranslatePipe
  ],
  imports: [
    BrowserModule,
    SharedModule,
    HttpClientModule,
    PAGES_ROUTES
  ],
  providers: [
    TranslateService,
    {
      provide: APP_INITIALIZER,
      useFactory: setupTranslateFactory,
      deps: [
        TranslateService
      ],
      multi: true
    }
  ]

})
export class PagesModules {}

Y en shared.module.ts tengo esto:

import { NgModule } from '@angular/core';
import { NopagefoundComponent } from './nopagefound/nopagefound.component';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
@NgModule({
  declarations: [
    NopagefoundComponent,
    HeaderComponent,
    SidebarComponent,
    BreadcrumbsComponent  ],
  exports: [
    NopagefoundComponent,
    HeaderComponent,
    SidebarComponent,
    BreadcrumbsComponent,
  ],
  providers: []
})
export class SharedModule { }

alguién tiene idea porque pasa esto??

Un saludo

2
  • Por favor, indica cual es la librería de traducción para poderte ayudar mejor
    – osiris85
    Commented el 25 oct. 2018 a las 14:26
  • @osiris85 la librería es: ngx-translate, perdona no había caído en ponerlo
    – Luiggi
    Commented el 29 oct. 2018 a las 9:56

1 respuesta 1

0

Por favor, prueba a efectuar la importación del módulo "TranslateModule" dentro de tú modulo PagesModule de una de las siguientes maneras:

  • Sin asignar configuración

    TranslateModule.forRoot()
    
  • Asignando configuración

    TranslateModule.forChild({
            loader: {provide: TranslateLoader, useClass: CustomLoader},
            compiler: {provide: TranslateCompiler, useClass: CustomCompiler},
            parser: {provide: TranslateParser, useClass: CustomParser},
            missingTranslationHandler: {provide: MissingTranslationHandler, useClass: CustomHandler},
            isolate: true
    })
    

Elimina el servicio TranslateService del pagesModule y proveelo en el propio componente SidebarComponent:

constructor(private translateService: TranslateService)

Al importar TranslateModule, no es necesario declarar el pipe de TranslatePipe.

En el constructor del módulo PagesModulo asigna el lenguaje por defecto de la siguiente manera:

 constructor(private translate: TranslateService) {
    // Setting default language as Spanish
    translate.setDefaultLang('es');
  }

Esto mismo se indica en el apartado "usage" del git de ngx-translate

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.