Something went wrong in the prerender.ts file at line 7. The error message is indicating that it cannot locate the module './dist-prerender/main.bundle'

Encountering an error while compiling the Angular code for prerendering:

ERROR in prerender.ts(7,62): error TS2307: Cannot find module './dist-prerender/main.bundle'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build && ng build --project prerender --output-hashing=none`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-06-12T07_43_21_717Z-debug.log

Seems like the main.bundle file is not generated by my application

I have made changes to angular.json for prerendering

angular.json

"prerender" : {

        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
                "build": {
                        "builder": "@angular-devkit/build-angular:server",
                "options": {
                        "outputPath": "dist-prerender",
                        "main": "main.prerender.ts",
                        "tsConfig": "tsconfig.prerender.json"
                },
                        "configurations": {
                        "production": {
                                "fileReplacements": [
                                        {
                                         "replace": "src/environments/environment.ts",
                                         "with": "src/environments/environment.prod.ts"
                                        }
                                ],
                                "optimization": true,
                                "outputHashing": "all",
                                "sourceMap": false,
                                "extractCss": true,
                                "namedChunks": false,
                                "aot": true,
                                "extractLicenses": true,
                                "vendorChunk": false,
                                "buildOptimizer": true
                        }
                }}
                }`

tsconfig.prerender.json

  {
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/prerender",
    /* node only understands commonjs for now*/
    "module": "commonjs"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.prerender.module#AppPrerenderModule"
  }
}

Answer №1

When I ran the command

ng build --project prerender --output-hashing=none
, I encountered an issue where both webpack.server.config.js and prerender.ts files were also being executed, resulting in an error. To resolve this, I decided to execute the command
ng build --project prerender --output-hashing=none
first before adding the prerender.ts file after the compilation.

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

Integrate a formcontrol within a specialized directive

I am looking to develop a directive that can alter a host element when a form control is invalid. Here's an example in code: <div [appFormControlValidate]="email"> <!-- email is the form control I want to use --> <input type="email" ...

What steps can I take to avoid conflicts between behavior subjects when making next() calls?

I am facing an issue with a BehaviorSubject variable named saveToLocalStorage. In one of my methods, the next() method is called twice, but only one of the calls is being completed while the other one gets overwritten. The service subscribed to these calls ...

What is the correct way to express an object in an array?

I've encountered an issue: I'm working with an array called _daysConfig<DayConfig> When I manually populate it like this, everything functions correctly: _daysConfig: DayConfig[] = [ { date: new Date('Wed Jul 22 2020 21:06:00 GMT+02 ...

The parameter 'unknown[]' cannot be assigned to the type 'OperatorFunction'

component.ts initialize() method explains The error message says 'Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' does not match the si ...

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

Why does Map.get always return undefined when using a number from a form element (extra1) in this code snippet? extraById = new Map<number,Extra>(); @Input() extra1: number = -1; formChanged(carConfigurationFormChanged : any) { const index ...

Ways to retrieve class variables within a callback in Typescript

Here is the code I'm currently working with: import {Page} from 'ionic-angular'; import {BLE} from 'ionic-native'; @Page({ templateUrl: 'build/pages/list/list.html' }) export class ListPage { devices: Array<{nam ...

Solving the 'ExpressionChangedAfterItHasBeenCheckedError' in Angular 8

In my current project, I have developed a component that is responsible for uploading files to a database. As part of the user interface, I added an overlay that displays information about the number of files selected and the number of files successfully u ...

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

The Angular firestore is showing an error stating that the property 'toDate' is not found in the 'Date' type

I am currently working on converting a timestamp object from Firestore to a Date object in TypeScript by utilizing the toDate() method. import { AngularFirestore } from '@angular/fire/firestore'; ... constructor(private database?: AngularFirestor ...

What is the term for specifying a variable's data type using a set of values instead of a traditional type?

Recently, I stumbled upon some code that introduces a class with specific variables defined in an unconventional manner. export class Foo { id: string = "A regular string" bar: '>' | '<' | '=' | '<=' | ...

Exploring methods for efficiently handling extensive XLSX files in a Node.js environment

Currently, I am utilizing the ts-xlsx library on the server side to read data. The process involves reading data from the frontend as a byte array using file-reader and then sending this byte array to a library to process the data. However, in cases where ...

Basic HTML Audio Player Featuring Several Customizable Variables

I have a unique API that manages music playback. Instead of playing audio in the browser, it is done through a Discord bot. Achievement Goal https://i.stack.imgur.com/w3WUJ.png Parameters: current: indicates the current position of the track (e.g. 2:3 ...

What sets enum with string values apart from a string type union in TypeScript?

When it comes to defining a variable with a predefined set of values in TypeScript code, there are two approaches - using an enum or using a union. For instance, imagine we have a button with various variants such as primary, secondary, and tertiary. We ...

Error code 2532 occurs when trying to access an object using square brackets in TypeScript

Encountered the ts error: Object is possibly 'undefined'.(2532) issue while trying to access the value of a field within an object, where the object key corresponds to a value in an Enum. Below is a concise example to showcase this problem: en ...

Is it possible for dynamically created injectors in Angular2 (created through Injector.create(...)) to be destructed at any point

Looking for insights on the lifecycle of injectors created using the Injector.create method I experimented with creating a component using ViewContainerRef.createComponent(...) and supplying dynamically generated dependencies through a custom injector pas ...

The Bootstrap modal I implemented is opening correctly, but for some reason, the form inside is not appearing

I created the AddJokeModalComponent to streamline the process of opening a form without duplicating code in every component. Below is the modal structure: <ng-template #addJokeModal> <div class="modal-content my-custom-modal"> ...

Is there a way to make the parent elements invisible when there are no child elements present?

Take this scenario for instance: <ul *ngIf="hasAnyPermission(['A:READ', 'B:READ', ...])"> <li *ngIf="hayPermission('A:READ')"> a </li> <li *ngIf="hasPermission('B:RE ...

Utilize the class or interface method's data type

In the context of a child component calling a callback provided by its parent, this situation is commonly seen in AngularJS. As I am utilizing TypeScript, I aim to implement strong typing for the callback in the child component. Here is the initial stat ...

Creating a Mobile-friendly Sidebar: A Guide to Angular 5

I've been seeing a lot of recommendations online about using Angular Material for creating a sidebar, but I'm hesitant to install an entire library just for one component. After following the instructions provided here, I managed to develop a si ...

Is it feasible to connect to an output component without using EventEmitter?

When it comes to creating components, I've found it quite easy to use property binding for inputs with multiple options available like input(). However, when dealing with component outputs, it can be a bit complicated as there's only one option u ...