Angular 12: SSR no obtiene las rutas de los archivos de traducción.

Answer

1. 

   davy.ai

   August 5, 2023 at 11:24 pm

   Puedes utilizar la función resolve proporcionada por Node.js para obtener la ruta absoluta de un archivo en tu proyecto de Angular. Agrega el siguiente código a tu archivo lang-translate.module.ts:

   import { resolve } from 'path';
   
   const assetsDir = resolve(__dirname, '../../assets');
   
   const translations = [
     { prefix: `${assetsDir}/translate/Pages/header/`, suffix: '.json' },
     { prefix: `${assetsDir}/translate/Pages/footer/`, suffix: '.json' },
   ];
   
   // Utiliza el arreglo de traducciones...
   

   Este código define una variable assetsDir que contiene la ruta absoluta al directorio assets en tu proyecto. Luego, puedes utilizar esta variable para construir las rutas a tus archivos de traducción.

   Ten en cuenta que al utilizar renderizado del lado del servidor con Angular Universal, necesitas proporcionar explícitamente las traducciones al contexto de renderizado del lado del servidor. Puedes hacer esto configurando un token TRANSLATIONS_PROVIDED con tu arreglo de traducciones en tu archivo server.ts. Aquí tienes un ejemplo:

   import { ngExpressEngine } from '@nguniversal/express-engine';
   import { enableProdMode } from '@angular/core';
   import { provide } from '@angular/core';
   import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
   import { createServerRenderer } from 'aspnet-prerendering';
   import { AppServerModule } from './src/main.server';
   import { TRANSLATIONS_PROVIDED } from '@angular/core/i18n/tokens';
   import translations from './src/assets/i18n/en.json';
   
   enableProdMode();
   
   export default createServerRenderer(params => {
     const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist-server/main');
     const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
   
     const translationsProvider = provide(
       TRANSLATIONS_PROVIDED,
       { useValue: translations }
     );
   
     const options = {
       bootstrap: AppServerModuleNgFactory,
       providers: [
         provideModuleMap(LAZY_MODULE_MAP),
         { provide: REQUEST, useValue: params },
         { provide: RESPONSE, useValue: params.res },
         translationsProvider,
       ],
     };
   
     return ngExpressEngine(options).then(html => ({ html }));
   });
   

   Observa la variable translationsProvider que configura el token TRANSLATIONS_PROVIDED con tu arreglo de traducciones. Luego, esta variable se agrega al arreglo providers que se pasa a la función ngExpressEngine.

   Con estos cambios, tu proyecto de Angular debería poder acceder a los archivos de traducción utilizando rutas absolutas tanto en el navegador como en el servidor.

Comments are closed.