Angular 11 SSR is compiled,but having issue with prod build and serve no content showed up in browser

Viewed 800
{
   "$schema":"./node_modules/@angular/cli/lib/config/schema.json",
   "version":1,
   "newProjectRoot":"projects",
   "projects":{
      "new-asasa":{
         "projectType":"application",
         "schematics":{
            
         },
         "root":"",
         "sourceRoot":"src",
         "prefix":"app",
         "architect":{
            "build":{
               "builder":"@angular-devkit/build-angular:browser",
               "options":{
                  "outputPath":"dist/new-asasa/browser",
                  "index":"src/index.html",
                  "main":"src/main.ts",
                  "polyfills":"src/polyfills.ts",
                  "tsConfig":"tsconfig.app.json",
                  "aot":true,
                  "assets":[
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles":[
                     "src/styles.scss",
                     "node_modules/intl-tel-input/build/css/intlTelInput.css",
                     "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
                  ],
                  "scripts":[
                     "node_modules/intl-tel-input/build/js/intlTelInput.min.js",
                     "node_modules/jquery/dist/jquery.min.js"
                  ],
                  "allowedCommonJsDependencies":[
                     "rxjs-compat",
                     "lodash"
                  ]
               },
               "configurations":{
                  "production":{
                     "fileReplacements":[
                        {
                           "replace":"src/environments/environment.ts",
                           "with":"src/environments/environment.prod.ts"
                        }
                     ],
                     "optimization":true,
                     "outputHashing":"all",
                     "sourceMap":false,
                     "namedChunks":false,
                     "extractLicenses":true,
                     "vendorChunk":false,
                     "buildOptimizer":true,
                     "budgets":[
                        {
                           "type":"initial",
                           "maximumWarning":"4mb",
                           "maximumError":"7mb"
                        },
                        {
                           "type":"anyComponentStyle",
                           "maximumWarning":"20kb",
                           "maximumError":"20kb"
                        }
                     ]
                  }
               }
            },
            "serve":{
               "builder":"@angular-devkit/build-angular:dev-server",
               "options":{
                  "browserTarget":"new-asasa:build"
               },
               "configurations":{
                  "production":{
                     "browserTarget":"new-asasa:build:production"
                  }
               }
            },
            "extract-i18n":{
               "builder":"@angular-devkit/build-angular:extract-i18n",
               "options":{
                  "browserTarget":"new-asasa:build"
               }
            },
            "test":{
               "builder":"@angular-devkit/build-angular:karma",
               "options":{
                  "main":"src/test.ts",
                  "polyfills":"src/polyfills.ts",
                  "tsConfig":"tsconfig.spec.json",
                  "karmaConfig":"karma.conf.js",
                  "assets":[
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles":[
                     "src/styles.scss"
                  ],
                  "scripts":[
                     "node_modules/intl-tel-input/build/js/intlTelInput.min.js"
                  ]
               }
            },
            "lint":{
               "builder":"@angular-devkit/build-angular:tslint",
               "options":{
                  "tsConfig":[
                     "tsconfig.app.json",
                     "tsconfig.spec.json",
                     "e2e/tsconfig.json",
                     "tsconfig.server.json"
                  ],
                  "exclude":[
                     "**/node_modules/**"
                  ]
               }
            },
            "e2e":{
               "builder":"@angular-devkit/build-angular:protractor",
               "options":{
                  "protractorConfig":"e2e/protractor.conf.js",
                  "devServerTarget":"new-asasa:serve"
               },
               "configurations":{
                  "production":{
                     "devServerTarget":"new-asasa:serve:production"
                  }
               }
            },
            "server":{
               "builder":"@angular-devkit/build-angular:server",
               "options":{
                  "outputPath":"dist/new-asasa/server",
                  "main":"server.ts",
                  "tsConfig":"tsconfig.server.json"
               },
               "configurations":{
                  "production":{
                     "outputHashing":"media",
                     "fileReplacements":[
                        {
                           "replace":"src/environments/environment.ts",
                           "with":"src/environments/environment.prod.ts"
                        }
                     ],
                     "sourceMap":false,
                     "optimization":true
                  }
               }
            },
            "serve-ssr":{
               "builder":"@nguniversal/builders:ssr-dev-server",
               "options":{
                  "browserTarget":"new-asasa:build",
                  "serverTarget":"new-asasa:server"
               },
               "configurations":{
                  "production":{
                     "browserTarget":"new-asasa:build:production",
                     "serverTarget":"new-asasa:server:production"
                  }
               }
            },
            "prerender":{
               "builder":"@nguniversal/builders:prerender",
               "options":{
                  "browserTarget":"new-asasa:build:production",
                  "serverTarget":"new-asasa:server:production",
                  "routes":[
                     "/"
                  ]
               },
               "configurations":{
                  "production":{
                     
                  }
               }
            }
         }
      }
   },
   "defaultProject":"new-asasa",
   "cli":{
      "analytics":false
   }
}

npm run dev:ssr works fine and also show ssr content loaded in browser. but when i run npm run build:ssr && npm run serve:ssr for production build ssr didn't work.

   "dev:ssr": "ng run new-asasa:serve-ssr",
    "serve:ssr": "node dist/new-asasa/server/main.js",
    "build:ssr": "ng build --prod && ng run new-asasa:server:production",
    "prerender": "ng run new-asasa:prerender"    "dev:ssr": "ng run new-asasa:serve-ssr",
    "serve:ssr": "node dist/new-asasa/server/main.js",
    "build:ssr": "ng build --prod && ng run new-asasa:server:production",
    "prerender": "ng run new-asasa:prerender"`
1 Answers

I don't understand the logic behind your serve:ssr task, seems like you haven't understood the fundamentals of Angular Universal and how it's setup.

The compiled SSR code available at node dist/new-asasa/server/main.js is just application code. If you try to run it directly using Node, it will not do anything. This compiled file is to be used as the basis for your server's view engine. Whenever someone calls your server, you have to use this code to render HTML pages on the server and then send them back. This is something that needs to be set up, it doesn't come out of the box because Angular does not know which server you'll be using in advance.

The serve-ssr task looks like a convenience utility added quite recently which might have confused you into thinking that things were simpler than they actually are.

Anyhow, there's way too much to explain here, please follow the official tutorial.

Related