server side rendering - Angular prerender i18n confusion

Question

We rely heavily on angular i18n for localization. Usually we would create one folder for locale using command

ng build some-project --localize

This would create /dist/some-project/en/ and /dist/some-project/de/

npm run prerender outputs only one in /dist/some-project/browser/ ignoring --localize flag all together. My question is: is prerender option still in some kind of beta? should we avoid it for now, or am i missing something here?

My understanding is i would have to create separate static pages for each locale.

Here is my angular.json

"prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "offer:build:prod",
        "serverTarget": "offer:server:prod",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "prod": {}
      }
    }

question from:https://stackoverflow.com/questions/65841146/angular-prerender-i18n-confusion

Answer 1

I dont think this is documented at all. Took me days of googling/try-failing only to find answer minutes after posting the question.

npm run prerender

executes:

 "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "offer:build:prod",
        "serverTarget": "offer:server:prod",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "prod": {}
      }
    }

I needed to to add "localize": ["en", "de"] option to server and browser build config
Server:

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/offer/server",
            "main": "projects/offer/server.ts",
            "tsConfig": "projects/offer/tsconfig.server.json",
            "localize": ["en", "de"]
          },
          "configurations": {
            "prod": {
              "sourceMap": false,
              "optimization": true
            }
          }
        }

Client:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/offer/browser",
            "index": "projects/offer/src/index.html",
            "main": "projects/offer/src/main.ts",
            "polyfills": "projects/offer/src/polyfills.ts",
            "tsConfig": "projects/offer/tsconfig.app.json",
            "localize": ["en", "de"],
            "aot": true,
            "extractCss": true,
            "preserveSymlinks": true,
            "stylePreprocessorOptions": {
              "includePaths": [
                "projects/offer/src"
              ]
            }... etc