I am trying to implement Server Side Rendering using Angular 14 with Angular Universal and Firebase Cloud Functions. I used this tutorial:
https://gist.github.com/debojyoti/d75a517f77d8e5881d87553f1e493614
as a guide. I followed all the necessary steps. When trying:
firebase deploy --only hosting, functions
I get the following error:
Failed to load function definition from source:
Failed to generate manifest from function source: Error [ERR_REQUIRE_ESM]: require() of ES
Module D:\chadoulis.gr\chadoulis\functions\node_modules\@angular\platform- server\fesm2015\platform-server.mjs not
supported. Instead change the require of D:\chadoulis.gr\chadoulis\functions\node_modules\@angular\platform-server\fesm2015\platform server.mjs
to a dynamic import() which is available in all CommonJS modules.
It seems that the main problem has to do with the index.js
file produced inside the functions
folder. This file goes like this:
require('zone.js/dist/zone-node');
const functions = require('firebase-functions');
const express = require('express');
const path = require('path');
const ps = require('@angular/platform-server');
const index = require('fs')
.readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
.toString();
let app = express();
app.get('**', function(req, res) {
ps.renderModule(AppServerModule, {
url: req.path,
document: index
}).then(html => res.status(200).send(html));
});
exports.ssr = functions.https.onRequest(app);
Any ideas?