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

Determining block time based on block number within Polygon Mumbai Testnet

Is there a dependable method to identify the production time of a specific block in Polygon Mumbai Testnet using only its block number? I am unable to utilize an Api for this purpose and am seeking a more user-friendly computational solution. Any suggest ...

Automated Validation Grouping in Angular Reactive Forms Based on Control Properties

After implementing the following code block, I am uncertain if this is the correct behavior: this.formGroup = this.fb.group({ name: this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required] ...

ApolloClient encounters type mismatches with ApolloLink

Struggling with creating ApolloClient using TypeScript, encountering type-errors that I'm unable to resolve. Seeking guidance on what steps to take next. Provided below is a snippet of the code (functions fine with JavaScript) for setting up the clie ...

Navigating the waters of importing npm modules with typescript, gulp, and browserify is a skill

I'm facing challenges with performing some fundamental tasks such as importing packages that I installed using NPM. Despite conducting extensive research online and following various tutorials, I have been unable to achieve success. Here is my current ...

Why is it necessary to create a model in Angular?

Although I am relatively new to Angular and my understanding of all its concepts is limited, I am curious about the practical use of models in observables. For example, consider this code segment: getRestaurants = (): Observable<Restaurant[]> => ...

Optimal method for importing libraries in Angular 2 with TypeScript

Currently experimenting with Angular2, but I find myself in need of using jQuery. After downloading the d.ts file, I referenced the definitions in each file using the following syntax: /// <reference path="../../../../typings/jquery/jquery.d.ts" /> ...

Locating Items in an Array using Angular 5 and Forming a New Array with the Located Objects

Looking for a way to extract objects from an array that have the type "noActiveServiceDashboard" and "extraAmountDashboard". I want to create a new array with only these two entries in the same format. I've attempted using .find() or .filter() method ...

Issues with TypeScript bundling external modules

I have a sample TypeScript code that I am attempting to bundle multiple ts/tsx files using the typescript compiler (tsc). Below is the code: File: ISample.ts class ISample{ constructor(public value:string){ } } export = ISamp ...

Issue with relative templateUrl in Angular 2 not resolving paths

As I embark on creating my first Angular 2 app, I'm faced with the task of setting my template in an HTML file using `templateUrl`. Currently, both the component.ts and view.html are stored in the same folder under src/ directory. Here's what I ...

Guide to invoking the API prior to shutting down the browser window in Angular4

Currently, I am working on an Angular 4 application that consists of 5 components. My goal is to trigger an API call when the user closes the browser window from any one of these components. However, I have encountered an issue where the API does not get ...

A guide on transforming a string into an array of objects using Node.js

Hey everyone, I have a single string that I need to convert into an array of objects in Node.js. let result = ""[{'path': '/home/media/fileyear.jpg', 'vectors': [0.1234, 0.457, 0.234]}, {'path': '/home/med ...

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Within a Svelte project that was scaffolded using Vite, I am attempting to create a Svelte store in Typescript. However, I am encountering difficulties when trying to import the Writable<T> interface as shown in the code snippet below: import { Writa ...

Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

Currently, I am utilizing p-dataView and I'm interested in implementing p-fieldset based on the application type. My goal is to prevent the fieldset from being duplicated when multiple instances occur. The scenario below illustrates one such case; how ...

Chart.js Axis Labels Orientation Guidelines

I am currently utilizing chart.js within an Angular 8 environment using Primeng. I am looking to customize the options for my chart as follows: For the y-axis ticks, set textDirection to 'ltr' For the x-axis ticks, set textDirection to 'rtl ...

What is the best way to avoid curly braces in an Angular template?

If I need to show the following string, including the {{ }}, in an Angular 2+ template: Hello {{name}}, how are you?" Note: The entire string will be hardcoded, not from a variable. What is the optimal method to encode the curly braces so they are not ...

Adjust the color palette size when the zoom level is modified in the responsive mode within Angular

I am currently working with Angular 15 and attempting to adjust the color palette size depending on the zoom level. <input #primaryColor (change)="colorChange($event,'primary')" formControlName="primaryColor" class="co ...

How can one effectively outline the structure of a document within firestore?

Currently, I am enclosing my calls to Firebase within a function so that I can specify the return type within the function. This allows me to define the type of data being retrieved from a document. However, TypeScript complains if you do not convert the F ...

Getting foreign key data from Django to display in Angular

Looking to fetch all columns of a table using a foreign key relationship and unsure of the process? Here's the code snippet: models.py class Athletes(models.Model): athlete_id = models.AutoField(db_column="AthleteID", primary_key="True") fir ...

Null value returned by getDOM() function during transition from Angular 2 to Angular 4

I've encountered a unique challenge that has me stumped. Despite finding similar issues, the proposed solutions don't seem to work for my case. My issue arose when I decided to migrate a project from Angular 2 to Angular 4. I began by creating a ...

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...