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
    el 25 oct. 2018 a las 14:26
  • @osiris85 la librería es: ngx-translate, perdona no había caído en ponerlo
    – Luiggi
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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