Блог

Я использую i18n с угловым универсальным SSR. Проблема в том, что клиент получил текст в исходном языковом стандарте, и через несколько секунд его заменяют на правильный языковой стандарт.

Например, загрузка клиента http://localhost:4000/en-US/ на первом дисплее отображается язык es, и через несколько секунд текст заменяется текстами языка en-US.

Папки сборки созданы правильно, и прокси-сервер идеально подходит для каждой локали. Я хочу, чтобы сервер вернул html с правильным переводом, чтобы поисковые роботы SEO могли правильно находить контент в каждой локали.

Похоже, что проблема в сборке, не сгенерированной с правильной локализацией.

Конфигурация проекта в файле angular.json:

 ...
"i18n": {
   "sourceLocale": "es",
   "locales": {
     "en-US": {
      "translation":"src/i18n/messages.en.xlf",
      "baseHref": "en-US/"
     }
 }
},
...
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/web/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "localize": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [], 
            "customWebpackConfig":{
              "path": "./webpack.config.js"
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          },
         ...
    }
 

Команда для построения проекта:

 ng build --prod --configuration=production amp;amp; ng run web:server:production
 

Каталоги сборки приводят к удалению пути/веб/браузер:

 en-US/
es/
                    
 

server.ts файл:

 export function app(lang: string): express.Express {
  const server = express();
  server.use(compression());
  const distFolder = join(process.cwd(), `dist/web/browser/${lang}`);
  const indexHtml = 'index.html';


  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    extraProviders: [{ provide: LOCALE_ID, useValue: lang }],
  } as any));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  server.get('*', (req, res) => {
    console.log(`LOADING DIST FOLDER: ${distFolder}`)
    console.log(`LOADING INDEX: ${indexHtml}`)
    res.render(`${indexHtml}`, {
      req,
      res,
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl },
        { provide: NgxRequest, useValue: req },
        { provide: NgxResponse, useValue: res }
        ]
    });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = express();
  const appEs = app('es');
  const appEn = app('en-US');
  server.use('/en-US', appEn);
  server.use('/es', appEs);
  server.use('', appEs);

  server.use(compression());
  server.use(cookieparser());
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule amp;amp; mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';
 

По умолчанию сервер, скорее всего, сначала обслуживает статический файл. Чтобы обойти это, вам следует изменить название index.html чтобы index.origial.html в папке dist.

В вашем server.ts досье

   // check for the correct version
  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
    ? 'index.original.html'
    : 'index.html';
 

Таким образом, результатом будет то, что ваша версия » es » будет называться index.original.html и вторичная версия станет новой статической версией, index.html которая будет подана первой.

После нескольких исследований я нашел лучшее решение. Для того, чтобы сервер отправил представление с правильным переводом, вам необходимо добавить файл прокси и создать серверы для каждой локали.

Включите i18n для серверов с флагом локализации в true:

 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/web/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true,
              "localize": true
            }
        },
 

Создать proxy-server.js:

 const express = require("express");
const path = require("path");

const getTranslatedServer = (lang) => {
  const distFolder = path.join(
    process.cwd(),
    `dist/web/server/${lang}`
  );
  const server = require(`${distFolder}/main.js`);
  return server.app(lang);
};

function run() {
  const port = 4000;

  // Start up the Node server
  const appEs = getTranslatedServer("/es");
  const appEn = getTranslatedServer("/en");

  const server = express();

  server.use("/es", appEs);
  server.use("/en", appEn);
  server.use("", appEs);

  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

run();
 

сервер.ts:

 import '@angular/localize/init';
import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';

import * as express from 'express';
import { join } from 'path';
import * as cookieparser from 'cookie-parser';

const path = require('path');
const fs = require('fs');
const domino = require('domino');
const templateA = fs.readFileSync(path.join('dist/web/browser/en', 'index.html')).toString();

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

const compression = require('compression');

const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;

global.window = win;
global.document = win.document;
global.Event = win.Event;
global.navigator = win.navigator;
console.log('declared Global Vars....');



import { AppServerModule } from './src/main.server';
import { NgxRequest, NgxResponse } from 'ngxc-universal';
import { environment } from 'src/environments/environment';
import { LOCALE_ID } from '@angular/core';

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/web');

const {LAZY_MODULE_MAP} = require('./src/main.server');





export function app(lang: string){
  const localePath =  'browser'   lang;

  const server = express();
  server.use(compression());
  server.use(cookieparser());
  server.set('view engine', 'html');
  server.set('views', join(DIST_FOLDER, 'browser'   lang));

  server.get('*.*', express.static(join(DIST_FOLDER, localePath), {
    maxAge: '1y'
  }));

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {provide: LOCALE_ID, useValue: lang}
    ]
  }));

  server.get('*', (req, res) => {
    res.render(`index`, {
      req,
      res,
      providers: [
        { provide: NgxRequest, useValue: req },
        { provide: NgxResponse, useValue: res }
        ]
    });
  });


  return server;

}


function run() {
  const server = express();
  const appEn = app('/en');
  const appES = app('/es');

  server.use('/en', appEn);
  server.use('/', appES);



  server.listen(PORT, () => {
      console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
}
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule amp;amp; mainModule.filename) || '';
if ( (!environment.production amp;amp; moduleFilename === __filename) ||
  moduleFilename.includes('iisnode')
) {
  run();
}

export * from './src/main.server';