Having difficulty generating an Angular 5 Universal server application bundle with @ngtools/webpack

I am currently working on developing a cross-platform app using Angular 5 and WebPack without utilizing the CLI.

The main issue I am facing is that I am unable to get the express application to function properly, resulting in encountering the following error message every time I try to access the server:

Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
    at View.engine (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/@nguniversal/express-engine/src/main.js:34:23)
    at View.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/view.js:135:8)
    at tryRender (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/application.js:640:10)
    at Function.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/response.js:1008:7)
    at /Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/dist/server.js:122:47
    at Layer.handle [as handle_request] (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/layer.js:95:5)
    at next (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/layer.js:95:5)

It seems like the problem lies within the server application bundle being consumed by server.ts because when I inspect AppServerModuleNgFactory through the console log, it appears as undefined.

I have attempted to align my server configuration as closely as possible with the one generated by the CLI project in the angular/universal-starter repository, but it fails to produce an app bundle usable by the server.

You can access the repository at 

https://github.com/mogusbi/ng5-universal-webpack
. Clone the repository, execute npm start, and navigate to localhost:4000.

node.jsangularexpresswebpackangular-universal

Answer №1

After digging into the CLI source code, I finally figured out why the ModuleNgFactories weren't being generated. It turns out that an undocumented option in the AngularCompilerPlugin called "platform" needs to be set to "1" in order to generate the server application bundle that is then used by ngExpressEngine in the express application.

Once this adjustment is made, everything functions as expected!

I hope this information proves helpful to anyone struggling to get the isomorphic functionality working without using the CLI.

Answer №2

To set up the main.server.ts file in the src folder, start by creating a new file named main.server.ts. Once the file is created, input the following code:

export { AppServerModule } from './app/app.server.module';

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

Displaying a list or a single object in GraphQL is a simple and

I was successfully able to retrieve the following data using GraphQL: { "data": { "city": { "name": "Eldorado", "users": [ { "username": "lgraham1" }, { "username": "ehowell" }, ...

node.jsexpressgraphql

Alert: Firebase notification - User callback error. Something went wrong with the function and exceeded the maximum call stack size

I'm currently developing an e-commerce website featuring a shopping cart functionality using NodeJS (ExpressJS) and Firebase Database. Whenever I attempt to add an item to the cart, I encounter an error message stating that the Maximum call stack size ...

node.jsfirebaseexpresshttpweb

Enable the user to access and retrieve a file from the publicly accessible folder in Meteor.js

I have successfully generated an Excel file with the extension .xlsx and saved it in the directory "../web.browser/app/cheques.xlsx". From my understanding, this location serves as a public folder within the build. However, I am facing difficulty in making ...

node.jsmeteorfsexceljs

Updating data within rows in Angular 4

Is there a way for me to update the value in my row based on a selected ingredient from a dropdown list? I want the unit price to be patched into the input field when a specific ingredient is chosen. You can find the relevant code snippets by visiting TH ...

angularangular-reactive-formsangular4-forms

How can we retrieve data from the back-end MongoDB and display it on the front-end using React JS?

I am working on displaying backend data from MongoDB in the frontend and calculating the balance of a specific member. Below is the code snippet: export default function BuySellInfo() { const[xnaLogData,setXnaLogData]=useState([]); const [balance,setB ...

node.jsreactjsmongodbexpress

Node.js: Sending a GET Request results in a 404 Not Found Error

I encountered an issue while working on building a REST API using Node.js and Express. The server is up and running at localhost:xxxx, however, when I attempt to access localhost:xxxx/bits, it results in a 404 Not Found error. var express = require(' ...

node.jsrestexpressget

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

I'm currently enrolled in a Typescript/Angular course where I am learning about the implementation of "*ngIf". During one of the lessons, the instructor provided an example using an empty array to demonstrate how it fails the condition and results in ...

htmlangularangularjstypescript

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Currently, I am working with angular and need to trigger my function codeInputChanged() each time the content of a textarea is modified either manually or programmatically using JavaScript. This is how my HTML for the textarea appears: <textarea class ...

javascripthtmlangulartypescript

What advantages does hosting a React app on an Express app bring to the table?

After creating and hosting several React applications, I find myself still puzzled by the concept of server side rendering. I'm eager to understand how serving my React applications from an Express server can be advantageous. Can you shed some light o ...

node.jsreactjsexpressfrontendbackend

The AngularJS 2 application reports that the this.router object has not been defined

My function to sign up a user and redirect them to the main page is implemented like this: onSubmit(){ this.userService.createUser(this.user).subscribe(function (response) { alert('Registration successful'); localStor ...

javascriptangularjsangularangular2-routing

Getting pictures dynamically from the backend with unspecified file types

Greetings to my fellow Stackoverflow-Users, Lately, I was tasked with the requirement of loading images dynamically from the backend into my application. Up until now, it was always assumed that we would only be dealing with SVG images since there was no ...

javascriptangulartypescript

Saving information in binary format to a file

I have a script for setting up an installation. This specific script is designed to access a website where users can input values and upload a certificate for HTTPS. However, the outcome seems to be different from the expected input file. Below is the cod ...

javascriptnode.jsssl-certificate

Encountering a situation where the data retrieved from Firestore in Angular TypeScript is returning as

I am encountering an issue with retrieving the eventID value from my Events collection in Firestore. Although I am able to successfully display all the events in my app, I require the eventID for additional functionalities. As someone new to TypeScript an ...

angulartypescriptfirebaseionic-frameworkgoogle-cloud-firestore

Only trades containing items with a specific appID are accepted by Steam NodeJS

Recently, I've been working on a NodeJS Steam bot for my CS:GO gambling site. However, I've encountered a specific issue that I need help with. I want the bot to only accept CS:GO items/skins that have an appID of 730. I believe this has somethin ...

node.jssteamsteambot

Configuring a React application within AWS Beanstalk with the help of environment variables

Is there a way to customize React application environment variables based on the Beanstalk environment it is deployed to? The objective is to compile React code with environment-specific variables only for that particular environment. The goal is to avoid ...

reactjsamazon-web-serviceswebpackamazon-elastic-beanstalk

Link scripts can sometimes cause issues with node.js

Greetings! I have successfully created a client-side SPA using vanilla-router. However, my Node.js server sometimes encounters an error when attempting to load a linked script. Uncaught SyntaxError: Unexpected token '<' This error only oc ...

javascriptnode.jsexpresssingle-page-application

I attempted to use webpac-dev-server with the --hot option, but unfortunately, it is not functioning as

I am having trouble running the webpack-dev-server --hot command. When I try to run the webpack server, I encounter an error: C:\ReactJS>npm run it > [email protected] it C:\ReactJS > webpack-dev-server --hot C:\ReactJS&bsol ...

node.jsreactjs

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

Attempting to switch the engine view from .ejs to .html resulted in an error. After searching online, I was unable to find a solution for the following problems: Express 500 SyntaxError: Unexpected token : in D:\practise\nodejs\nodejs-demo& ...

javascriptnode.jsexpress

Dropdown box not displaying any choices

I developed a basic reusable component in the following way: Typescript (TS) import {Component, Input, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; @Component({ selector: 'app-select', templa ...

javascriptangulartypescript

Every time Fetch() is called in Node.js, a fresh Express session is established

Here is a snippet of code from a webshop server that includes two APIs: ./login for logging in and ./products to display products. The products will only be displayed after a successful login. The server uses TypeScript with Node.js and Express, along wit ...

javascriptnode.jsexpresssessionfetch