Objective
The task may seem lengthy, but it's straightforward!
Currently, I am utilizing Angular Universal for Server-Side Rendering (SSR) by following a tutorial. The Universal/express-engine has been installed, main.js is generated in the dist/projectname/server directory, and I have created a prerender.js folder in the project root.
Issue
Upon running npm run prerender, the process initiates pre-rendering until encountering the following error:
Error: No NgModule metadata found for 'class{}'
This leads to several UnhandledPromiseRejectionWarning messages and errors throughout the process.
Intended Outcome
I aim to pre-render the HTML of our primary route and save it to a text file.
Attempted Solutions
This approach involved deleting the chained .catch(err...) function of the bootstrap in main.ts, resulting in the same error.
Another method included deleting node-modules and package.json, then running npm install, ng build, ng serve, which also led to the same error.
A different fix advised updating AngularCLI and Webpack, yet the error persisted.
Software Versions
Angular CLI: 10.0.0
Node: 12.16.3
OS: win32 x64
Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: <error>
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.901.9
@angular-devkit/build-optimizer 0.901.9
@angular-devkit/build-webpack 0.901.9
@angular-devkit/core 9.0.7
@angular-devkit/schematics 10.0.0
@angular/cdk 9.2.4
@angular/fire 6.0.2
@ngtools/webpack 9.1.9
@nguniversal/builders 9.1.1
@nguniversal/common 9.1.1
@nguniversal/express-engine 9.1.1
@schematics/angular 10.0.0
@schematics/update 0.1000.0
rxjs 6.5.5
typescript 3.9.5
webpack 4.43.0
Files Involved
- prerender.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '@angular/platform-server';
import {writeFileSync} from 'fs';
const {AppServerModuleNgFactory} = require('./dist/hibernio/server/main');
renderModuleFactory(AppServerModuleNgFactory, {
document: '<app-root></app-root>',
url: '/'
})
.then(html => {
console.log('Pre-rendering successful, saving prerender.html');
writeFileSync('./prerender.html', html);
})
.catch(error => {
console.error('Error occurred:', error);
});
- server.ts
Import statements...
Content of server.ts...
- main.server.ts
Import statements...
Other code snippets...
- tsconfig.server.json
Configuration details...
- angular.json
Project setup details...
- package.json
Information about npm packages used...
Additional Note
An issue related to Ivy was identified by David. Enabling Ivy in tsconfig.json under compilerOptions > enableIvy resulted in a series of errors related to fontawesome. Previously, disabling Ivy was necessary when integrating fontawesome due to conflicts. Now, finding a solution to make both packages operational together with Ivy enabled is challenging.
Special thanks to David for flagging the Ivy complication.