Encountering a problem with Angular 11 SSR after compilation, where the production build is causing issues and no content is being displayed in

{
   "$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 perfectly and also displays ssr content in the browser. However, when I execute

npm run build:ssr && npm run serve:ssr
for production build, ssr doesn't function properly.

"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"    

Answer №1

I'm struggling to grasp the rationale behind your implementation of the serve:ssr task. It appears that you may not have a solid understanding of Angular Universal and its configuration.

The generated SSR code located at

node dist/new-asasa/server/main.js
is essentially application code. Running it directly with Node will not yield any results. This compiled file serves as the foundation for implementing your server's view engine. When a request is made to your server, you must utilize this code to dynamically generate HTML pages and send them back. This setup is crucial but requires manual configuration since Angular cannot predict which server environment you will use.

The introduction of the serve-ssr task might have misled you into believing that the process is simpler than it actually is.

Explaining all the intricacies here would be overwhelming, so I recommend consulting the official tutorial for comprehensive guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Internationalization of deferred-loaded modules within the JHipster application

I created My App using JHipster, which utilizes the JhiLanguageService in the ng-jhipster library. This service relies on the JhiConfigService to configure ngx-translate without requiring manual imports and configuration of the TranslateModule in my app.mo ...

What is the best approach for managing and obtaining accurate JSON responses when working with PHP API and AngularJS 2 services?

Encountering a backend issue with MySQL, wherein one query is producing a specific dataset: {"candidat":[{"ID":1,"nom":"Danny","prenom":"Hariot","parti":"Quamba","departement":"Ukraine","commune":"Chapayeve"},{"ID":2,"nom":"Shari","prenom":"Adamkiewicz"," ...

Retrieve highlighted text along with its corresponding tag in ReactJS

my <span class="highlight">highlighted</span> word The text above is showing an example including HTML tags. However, when using window.getSelection(), only the text "my highlighted word" is returned without the surrounding <span& ...

angular triggering keyup event multiple times

Currently, I am working on a datalist feature. Whenever the user types something into the input field and releases a key, a GET request is made to retrieve an array of strings which are then displayed in the datalist. <input type="text (keyup)=&quo ...

What is the equivalent of html script tags in Webpack 2?

I recently downloaded a new npm module that suggests including the following code in my project: <link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" /> <script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"&g ...

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Hey there fellow developers! I'm currently working on a simple Angular app that allows users to upload images to a gallery. However, I've encountered an issue while trying to upload the images to Firebase Storage. I keep getting an error mentioni ...

Sidenav selector unable to display Angular component

I'm facing a dilemma. I have the following code in my app.component.html file: <mat-sidenav-container class="sidenav-container"> <app-sidenav></app-sidenav> <mat-sidenav-content> <app-header></app-header> ...

Can a custom CSS be linked directly to the angular-cli.json file?

I'm trying to incorporate custom CSS into my angular-cli.json file, but I haven't been able to find a successful method. I attempted to use the following code: "styles": [ "styles.css", "http://site.test/mycss.css" ], However, it does ...

Challenge Encountered while Generating Angular Docker Image using VSTS Pipeline

I'm currently in the process of setting up a VSTS pipeline to create a Docker Image for an Angular Application. I've chosen the "Hosted Windows Container" as the Agent pool, but I'm encountering the following error: Step 1/5: FROM nginx:alp ...

Creating test cases for a service that relies on a Repository<Entity> to consume another service

Having trouble creating tests for an auth.service that seems pretty straightforward from the title. However, every time I run the tests, I encounter this error: TypeError: Converting circular structure to JSON --> starting at object with cons ...

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...

Troubleshooting a useContext error in Next.js with TypeScript

I've been working on an app using next.js for the frontend, and I encountered an issue while trying to stringify an object. Here's a snippet of the error message: Argument of type '{ auth: dataObject; }' is not assignable to parameter o ...

Using the Capacitor plugin for Firebase Auth, log in to Azure AD B2C with Ionic/Angular

I have been trying to authenticate with Microsoft using a Capacitor plugin, but I haven't had any success so far. I carefully followed the instructions in this documentation and made sure everything is well configured. Could you please guide me on w ...

Issues with functionality of React/NextJS audio player buttons arise following implementation of a state

I am currently customizing an Audio Player component in a NextJs application using the ReactAudioPlayer package. However, the standard Import Next/Audio and using just <Audio> without props did not yield the expected results. The player functions as ...

Can a File Object be transmitted to an AWS Lambda function via API Gateway using JavaScript?

Can a JavaScript File Object be passed from a browser to AWS Lambda via API Gateway (ultimately to S3)? I am working with TypeScript and React. Environment Frontend TypeScript React AWS Amplify (for API module) Backend(AWS Lambda) Node.js Expecta ...

Detecting changes in an object property that is bound to another object property - a comprehensive guide

In my application, I am facing a challenge with displaying navigation items based on user rules. This is how I have tried to implement it: I define an object with the necessary rules: rules: { canSeeProfile: true, canSeeAdminZone: false, ... ...

There is an error in the TypeScript code where it is not possible to assign a string or

I'm struggling to resolve a typescript error. Upon checking the console log, I noticed that the regions returned by Set are an array of strings, which aligns perfectly with the region type in my state. Why isn't this setup working as expected? S ...

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

I'm working with a TypeScript single file vue component. I've encountered an issue where the template does not display the values returned by certain component methods. Here's a snippet of the template: <div class="order-items"> ...

When implementing a sizable Angular material popover, ensure that the parent content is designed to allow scrolling

I have a custom popover feature in my current project, which includes checkboxes beneath the main content. Everything is functioning properly at the moment, but I've encountered an issue when the screen's resolution is reduced - the content at th ...

What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects. Although I import these components like any other npm library, I encounter an error message when trying to serve my ap ...