Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

server side rendering - Angular prerender i18n confusion

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...