Prerending Angular builds with output hashing seems to be causing issues, as they are not functioning as expected

I have a command that generates prerender build in my angular 13 project :

"prerender:staging": "ng run app:prerender --configuration staging",

This is what my angular.json looks like :

    "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "guessRoutes": false,
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "staging": {
          "browserTarget": "app:build:staging",
          "serverTarget": "app:server:staging"
        },
      },
      "defaultConfiguration": "staging"
    },

When I execute the command with "outputHashing": "none" in staging configuration, everything works fine.

However, changing

"outputHashing": "none"
to
"outputHashing": "all"
results in an error at the end of the prerender build :

An unhandled exception occurred: Could not find the main bundle: C:\Users\andri\OneDrive\Desktop\test\TEST-Project\app\dist\app\server\main.js
See "C:\Users\user\AppData\Local\Temp\ng-HwSKT5\angular-errors.log" for further details.

What steps should be taken to build Angular prerender with outputHashing="all" ? This is crucial as it clears the cache after each new deployment to the server.

Answer №1

OutputHashing is required for browser bundles and media files, but not for server ones. This is why the default setting is outputHashing: 'media' for the server target. Personally, I prefer to set it to none to prevent any media-related errors during prerendering processes.

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

Adjusting Button Positioning in Bootstrap with Angular 8: A Step-by-Step Guide

My button size was changed to btn-sm, but now it's misaligned with the other social icon buttons in my navbar. How can I center it again? https://i.sstatic.net/pyoTx.png I'm using Angular 8 for my website backend (does this affect the alignment ...

In Angular 10, the default state of the radio button is not checked

We are attempting to set the default selection for the radio button group to the Female option. <ng-template #genderTemplate> <div> <div> <label class="ari-label" for="gender">Gender</l ...

Are the fromPromise and toPromise functions in Rxjs resource-intensive?

Within my TypeScript application, I have come to a stage where one of my methods performs multiple operations with fromPromise and toPromise: myMethod(...): Promise<string> { return fromPromise(this.someService1.someMethod1(...)).pipe( m ...

Passing extra arguments to a callback function in Typescript

I'm trying to pass a parameter to a callback function. Below is the snippet of my function: let func = function(el, index){ if(el.id === myId) return index; } arr = [obj1, obj2, obj4, ...]; arr.filter(func); Is there a way to suc ...

What are your thoughts on this method? Verifying the existence of a variable or setting it to

const pictureEntity = updateUserDto?.picture ? await this.filesService.find(updateUserDto.picture) : null; if (pictureEntity) { const url = await this.filesService.getFileUrl(pictureEntity); } Is the method used to assign the value to pictureEn ...

Storing information retrieved from the API for use in different modules

Trying to extract data from a WEB API service using Angular 8 has been quite challenging for me. A service I created makes the API call: return this.http.get<UserSession>(uri) .pipe(map((json: UserSession) => this.EntryFormAdapter(json))); Th ...

Using forRoot does not trigger Angular lazy loading functionality

I have implemented a lazy load module that needs to expose providers by utilizing the forRoot convention and returning the following code: @NgModule({ imports: [RouterModule.forChild([ {path: "", component: LazyComponent}, ])], declarations: [La ...

Invoking a function from a collection of mixed data types

I have established a mapping for a discriminated union consisting of different types, each linked to a corresponding function that uses a member of the union as a parameter: export interface Truncate { type: 'truncate' maxLength: number } ex ...

What is the recommended way to use the async pipe to consume a single Observable property in a view from an Angular2

Suppose I have a component with the following property: import { Component, OnInit } from 'angular2/core'; import { CarService } from 'someservice'; @Component({ selector: 'car-detail', templateUrl: './app/cars/ ...

How can I limit a type parameter to only be a specific subset of another type in TypeScript?

In my app, I define a type that includes all the services available, as shown below: type Services = { service0: () => string; service1: () => string; } Now, I want to create a function that can accept a type which is a subset of the Service ...

What steps should I take to resolve the ChunkLoadError related to signalr?

Recently, I encountered an issue while running my nx site locally. It seems that any federated app using signalR is now throwing a ChunkLoadError. I attempted various solutions such as changing the version of signalR, reloading the page, clearing cache, a ...

What is the best way to add a repository in Nest.js using dependency injection?

I am encountering an issue while working with NestJS and TypeORM. I am trying to call the get user API, but I keep receiving the following error message: TypeError: this.userRepository.findByIsMember is not a function. It seems like this error is occurring ...

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

I am currently using ng2-smart-table and have implemented a custom filter with the same button in both filters. However, I am unsure of how to determine which button is being clicked. https://i.stack.imgur.com/b1Uca.png Below is the component code for th ...

The ability of Angular 4 ngComponentOutlet to load dynamic components is great, however, there seems to be an issue

Currently, I am faced with the challenge of loading various 'parent' components and injecting route content into these individual parent components by utilizing ng-content in each one. Essentially, the purpose of each parent component is to manag ...

Is it possible to transfer the setState function between different contextProviders?

I'm encountering difficulties in setting a state when passing the context provider to other elements. Here is my code snippet. I have created a FancyboxContext so that I can easily access it from anywhere in the app. import React, { createContext, use ...

What is preventing me from importing sprintf-js in TypeScript?

I am facing an issue with my TypeScript file when trying to import third-party libraries. import * as _ from 'lodash'; // Successfully imported import * as moment from 'moment'; // Successfully imported import {vsprintf} from 'spr ...

What is the reason for TypeScript allowing this promise chain without any compilation errors?

Although I am still relatively new to Typescript, I find myself grappling with a particular issue that has been perplexing me. I am unsure why the following code snippet triggers a compilation error: // An example without Promises (does not compile) funct ...

What methods work most effectively for gathering user behavior data in a web application?

While I may not be a seasoned professional web developer, I have gained some experience with front-end frameworks like Angular 4 and Vue 2.0, as well as other tools that have allowed me to create web applications (SPA) and utilize AWS Lambda for the backen ...

Update the page content once the popover is closed. Working with IONIC 3

In my application, there are 4 tabs, each displaying different data based on a specific configuration. The header of the page includes a popover component with settings options. When a user adjusts the settings and returns to a tab page, the content on th ...

What could be causing the HTTP PUT requests to stop functioning properly after a number of requests?

Currently, I am developing an app for the premier league that allows users to create their own teams, input scores for matches, and view updated team statistics in a sortable table based on the Premier League rules. Issue: I have encountered a problem wi ...