如何在Angular服务器端渲染（通用）中使用xi18n（AOT）

Question

I want to serve a multi language angular application, while using server side rendering for SEO and performance. For that I have currently following situation:

package.json scripts:

"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "npm run build-i18n && ng run my-web:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build-i18n:de": "LOCALE=de && npm run build-i18n:locale",
"build-i18n:en": "ng build --output-path=dist/browser/en --aot --prod --base-href /en/ --i18n-locale=en",
"build-i18n": "npm run build-i18n:en && npm run build-i18n:de"

server.ts:

// Locale to get best language match
import { Locales } from 'locale';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

const supportedLanguages = ['de', 'en'];

for (const language of supportedLanguages) {
  // Server languages static files from /browser
  app.get('/' + language + '/*.*', express.static(join(DIST_FOLDER, language, 'browser'))); // todo

  // All languaged regular routes use the Universal engine
  app.get('/' + language + '/*', (req, res) => {
    console.log(language);
    res.render(language + '/index', {req});
  });
}

My issue is that I get only the right index.html with the right base-href, but not the right translated texts from the .xlf files (only the ones who are in the component HTMLs). I have only one single main.js in dist/server. With xi18n and AOT I get dist/browser/de and dist/browser/en. I could not found any tutorial or example to be able to combine xi18n and the server side rendering of angular.

My angular.json has following architect entry:

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }

It would be great if some one could help me solving this issue.

My angular version is: 6.0.3

Thank you in advance.

Ramazan

Answer 1

This is what I do for the Korean version:

package.json

"build:client-and-server-bundles-ko": "ng build --prod --base-href=/ko --deploy-url=/ko/ --output-path=dist/ko/browser --i18n-file=src/locale/messages.ko.xlf --i18n-locale=ko --i18n-format=xlf  && ng run rendercore-www:server --outputPath=dist/ko/server",
"build:client-and-server-bundles-staging-ko": "ng build --prod --base-href=/ko --deploy-url=/ko/ --output-path=dist/ko/browser --i18n-file=src/locale/messages.ko.xlf --i18n-locale=ko --i18n-format=xlf  --configuration=staging && ng run rendercore-www:server:staging --outputPath=dist/ko/server",
"build:client-and-server-bundles-prod-ko": "ng build --prod --base-href=/ko --deploy-url=/ko/ --output-path=dist/ko/browser --i18n-file=src/locale/messages.ko.xlf --i18n-locale=ko --i18n-format=xlf  --configuration=production && ng run rendercore-www:server:production --outputPath=dist/ko/server",
"build:ssr-ko": "npm run build:client-and-server-bundles-ko && npm run webpack:server-ko",
"build:ssr-staging-ko": "npm run build:client-and-server-bundles-staging-ko  && npm run webpack:server-ko",
"build:ssr-prod-ko": "npm run build:client-and-server-bundles-prod-ko  && npm run webpack:server-ko",
"webpack:server-ko": "webpack --config webpack.server.config.js --env.lang=ko --progress --colors",

server-ko.ts

// These are important and needed before anything else
import "zone.js/dist/zone-node";
import "reflect-metadata";
import { enableProdMode } from "@angular/core";
import * as express from "express";
import { join } from "path";

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
// const DIST_FOLDER = join(process.cwd(), 'dist');
const DIST_FOLDER = join(process.cwd(), "");  //here..i changed

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require("./dist/ko/server/main");//here..i changed add ko

// Express Engine
import { ngExpressEngine } from "@nguniversal/express-engine";
// Import module map for lazy loading
import { provideModuleMap } from "@nguniversal/module-map-ngfactory-loader";

app.engine(
    "html",
    ngExpressEngine({
        bootstrap: AppServerModuleNgFactory,
        providers: [provideModuleMap(LAZY_MODULE_MAP)]
    })
);

//here..i changed
app.use(function(req, res, next) { 
    if (req.url.slice(0, 4) === "/ko/") {
      req.url = req.url.slice(3);
    }
    next();
});

app.set("view engine", "html");
app.set("views", join(DIST_FOLDER, "browser"));

// Server static files from /browser
app.get("*.*", express.static(join(DIST_FOLDER, "browser")));

// All regular routes use the Universal engine
app.get("*", (req, res) => {
    console.log(`GET: ${req.originalUrl}`);
    res.render("index", {
      req: req,
      res: res
    });
});

// Start up the Node server
app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
});

webpack.server.config.js

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

module.exports = env => {
    //console.log(env);
    let langWithDash = env == undefined ? "" : "-" + env.lang;
    let langWithSlash = env == undefined ? "" : "/" + env.lang;
    return {
      entry: { server: "./server" + langWithDash + ".ts" },
      resolve: { extensions: [".js", ".ts"] },
      target: "node",
      mode: "none",
      // this makes sure we include node_modules and other 3rd party libraries
      externals: [/node_modules/],
      output: {
        path: path.join(__dirname, "dist" + langWithSlash),
        filename: "[name].js"
      },
      module: {
        rules: [{ test: /\.ts$/, loader: "ts-loader" }]
      },
      plugins: [
        // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
        // for 'WARNING Critical dependency: the request of a dependency is an expression'
        new webpack.ContextReplacementPlugin(
          /(.+)?angular(\\|\/)core(.+)?/,
          path.join(__dirname, "src"), // location of your src
          {} // a map of your routes
        ),
        new webpack.ContextReplacementPlugin(/(.+)?express(\\|\/)(.+)?/, path.join(__dirname, "src"), {})
      ]
    };
};

Use npm run build:ssr-ko

Then it will make a subfolder under dist folder like so:

/dist/ko/xxxxx

You have to rewrite the URL from the web server. I use IIS so this is an IIS example:

<rule name="Lang-EN" stopProcessing="true">
    <match url="^en[\/].*?" />
    <action type="Rewrite" url="dist/en/server.js" />
</rule>

<rule name="L51ang-KO" stopProcessing="true">
    <match url="^ko[\/].*" />
    <action type="Rewrite" url="dist/ko/server.js" />
</rule>

Also you will get an error with the /assets URL because the current angular has a bug.

Even if you use base-href and deploy-url , still some HTML will have an /assets path.

So I try this:

<rule name="Asset Redirect" stopProcessing="true">
    <match url="^assets\/.*" />
    <action type="Rewrite" url="dist/en/server.js" appendQueryString="true" />
</rule>

One more tip, if the client accesses / of the site, redirect to their browser language setup:

<rule name="Redirect To KO"  stopProcessing="true">
    <match url="^$" />
        <conditions>
          <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^ko" />
        </conditions>
    <action type="Redirect" url="{R:0}/ko/home" appendQueryString="true" />
</rule>

Then if you want to add other language do this step again.

My build script looks like this:

cd www
rmdir /S /Q dist
call npm i 
call npm run build:ssr-staging-en || exit /b -1
call npm run build:ssr-staging-ko || exit /b -1
call npm run build:ssr-staging-ja || exit /b -1

build en ko ja , then it will create this:

/dist/ko/server.js
/dist/en/server.js
/dist/ja/server.js

Just upload this to the web server then setup rewrite correctly.

Hopefully you understand. Thanks.