且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular服务器端渲染-向angular.json添加什么?

更新时间:2023-09-30 10:36:10

要回答您的问题,由于您使用的是Angular 8,因此您可以运行以下命令使您的项目使用s-s-r:

To answer your question, since you are using Angular 8 you can run this command to make your project use s-s-r:

ng add @nguniversal/express-engine --clientProject norebro

运行此命令后,应由Angular正确设置所有设置.要检查是否一切正常,请先构建您的项目:

After you run this command you should get everything setup properly by Angular for you. To check if everything is working first build your project:

npm run build:s-s-r

然后投放(并检查是否一切正常):

and then serve it (and check if everything is working correctly):

npm run serve:s-s-r

具体来说,需要在angular.json内部进行修改的内容是:

Specifically, the things that need to be modified inside angular.jsonare:

  • 在项目"->"norebro"(您的项目名称)->建筑师"->构建"->选项"部分中,修改outputPath如下:
  • In "projects"->"norebro" (your_project_name)->"architect"->"build"->"options" section modify outputPath like this:
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/browser",

  • 然后在建筑师"部分中,添加一个新的server部分,如下所示:
    • Then in "architect" section, add a new server section like this:
    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "sourceMap": false,
          "optimization": {
            "scripts": false,
            "styles": true
          }
        }
      }
    }


关于将Angular s-s-r应用程序发布到Firebase,请检查


As for publishing an Angular s-s-r application to Firebase please check this answer.

关键是我们无法使用Firebase Hosting部署Angular s-s-r应用程序,但可以使用

The key point is that we cannot deploy Angular s-s-r application using Firebase Hosting but we can do it by using Firebase Cloud Functions.

P.S::最初,答案已发布在此处,但用户在查询时可能无法在此处找到有关Firebase部署的答案(因为OP与部署到Firebase无关).这就是为什么我创建一个单独的Q& A来解决该问题的原因.

P.S: Initially, the answer was posted here but users may not find the answer to Firebase deployment here when querying (since the OP is not about deployment to Firebase). That's why I created a separate Q&A just to address that issue.

希望这对您有帮助...

Hope this helps...