Angular 9：将angular i18n与服务器端渲染（Angular Universal）一起使用

debugcn 发表于 Dev

大卫

我正在将angular 7应用程序迁移到angular 9，该应用程序使用服务器端渲染（角度通用）和angular i18n两种语言（法语和英语）。

在旧的angular 7流程中，由于我使用的是AOT，因此必须进行5个构建以进行生产：

2个客户端版本（1个法语版本，1个英语版本）
2 x服务器构建（1表示法语，1表示英语）
建立server.ts

然后，在server.ts我动态加载正确的服务器捆绑包中

旧的server.ts

app.engine('html', (_, options: any, callback) => {

  const isFR= options.req.url.indexOf('site-fr') >= 0 ;
  const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = isFR ? require('./dist/server/fr/main') : require('./dist/server/en/main');

// Our index.html we'll use as our template
  const template = readFileSync(join(DIST_FOLDER, 'browser', isFR ? 'fr' : 'en', 'index.html')).toString();
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,

我将应用程序迁移到了angular 9，现在根据我在文档中了解的内容，只需要一个客户端版本。

您还可以使用现有的生产配置为ng build命令提供--localize选项。在这种情况下，CLI会在项目配置中构建在i18n下定义的所有语言环境。

这似乎适用于客户端版本，因为2个文件夹（fr并且en已生成）。

但是，没有任何地方提到将SSR与i18n一起使用。所以我最后一个server.ts。

这是我用来构建和运行项目的脚本

angular.json

"serve:ssr": "node dist/myproject/server/main.js",
"build:ssr": "ng build -c production --localize && ng run myproject:server:production"

新的server.ts

// The Express app is exported so that it can be used by serverless Functions.
export function app(port) {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/myproject/browser/fr');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

区域文件夹结构

- dist
  - myproject
    - browser
        - fr
          - index.html
          - *.js
        - en
          - index.html
          - *.js      
    - server
        - main.js

注意：我确实看到一个封闭的github问题描述了这个问题，但是解决方案基本上是回到以前的方式，即每种语言有2个版本，并且还有2个版本server.ts。

当然有另一种方法吗？

大卫

我发现一个仅涉及2个构建的解决方案。但是现在需要运行2个服务器进程实例。

步骤＃1：angular.json

确保在中正确定义了语言环境，angular.json并allLocales在my-project:server选项中添加了新目标。

我创建了一个新allLocales目标，因为我不知道如何将production目标与en和fr配置结合使用。这样做的目的是只构建一台服务器，并生成所有语言服务器。

对于前捆绑包，这本来可以通过ng build（即ng build --configuration=production,fr,en or ng build --configuration=production --localize）实现

angular.json

 "projects": {
    "my-project": {
      "i18n": {
        "locales": {
          "en": {
            "translation": "src/locale/messages.en.xlf",
            "baseHref": ""
          },
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": ""
          }
        }
      },
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            //...
          },
          "configurations": {
            "production": {
             //...
            },

            "en": {
              "localize": [
                "en"
              ]
            },


            "fr": {
              "localize": [
                "fr"
              ]
            }

          }
        },

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

          "configurations": {
            "production": {
              //...
            },

            "allLocales": {
              "outputHashing": "none",
              "optimization": false,
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "localize": [
                "en", "fr"
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },

步骤2：server.ts

修改server.ts文件以接受语言参数。生成的服务器捆绑包的每个运行实例都main.js将具有其自己的端口和语言。

server.ts

//...
export function app(language) { //add language here
  const server = express();
  const distFolder = join(process.cwd(), 'dist/my-project/browser', language); //Use language here


//...

function run() {
  const port = process.env.PORT || 5006;
  const language = process.env.LANGUAGE || 'fr';

  // Start up the Node server
  const server = app(language); //Use the language here
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port} for language ${language}`);
    });

步骤＃3：修改package.json

package.json

"build:ssr": "ng build -c production --localize && ng run my-project:server:allLocales"
"serve:ssr-en": "env PORT=5006 LANGUAGE=en node dist/my-project/server/en/main.js",
"serve:ssr-fr": "env PORT=5007 LANGUAGE=fr node dist/my-project/server/fr/main.js",

build:ssr将为所有语言构建客户端捆绑，然后为所有语言构建服务器捆绑，server:ssr-XX将启动nodejs服务器以获取与语言XX相关的端口和语言

这是结构

- dist
  - myproject
    - browser
        - fr
          - index.html
          - *.js
        - en
          - index.html
          - *.js      
    - server
        - fr
            - main.js
        - en
            - main.js