How can I serve data to front-end in Angular universal App from a server different from ExpressJS server provided by Angular universal? - node.js

Question

I am having an issue with my Angular SSR App that is still in development stage. It's a routing issue. FYI, I am new in Angular (or web dev). The problem is, I can start SSR server and it will work fine if the route on the browser address bar is pointing to static page, that's, a page/component that doesn't fetch data from the backed; I can navigate to any route without any issues. But if I start the SSR server when the link on the browser address bar is pointing to a route that fetches data from the backend, it won't work. The same thing happens when I reload. The browser goes on loading without displaying anything and the terminal shows the error message below like it's looping until the server crashes.
ERROR HttpErrorResponse {
headers: HttpHeaders {
normalizedNames: Map {},
lazyUpdate: null,
headers: Map {}
},
status: 0,
statusText: 'Unknown Error',
url: 'http://localhost:4000/http://localhost:3000/api/posts?pagesize=2&page=1
,
ok: false,
name: 'HttpErrorResponse',
message: 'Http failure response for http://localhost:4000/http://localhost:30
0/api/posts?pagesize=2&page=1: 0 Unknown Error',
error: ProgressEvent {
type: 'error',
target: XMLHttpRequest {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: '',
responseType: 'text',
responseURL: '',
status: 0,
statusText: '',
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: 'GET',
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
......
.....
....
....
lengthComputable: false,
loaded: 0,
total: 0
}
}
<--- Last few GCs --->
[4452:0000002EB0A8B870] 320685 ms: Mark-sweep 1982.1 (1990.6) -> 1981.2 (1990
6) MB, 1846.0 / 0.2 ms (average mu = 0.093, current mu = 0.015) allocation fai
ure scavenge might not succeed
[4452:0000002EB0A8B870] 322582 ms: Mark-sweep 1982.1 (1990.6) -> 1981.3 (1990
6) MB, 1785.5 / 0.3 ms (average mu = 0.077, current mu = 0.059) allocation fai
ure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 00007FF7AB40D31D]
Security context: 0x004c643008d1 <JSObject>
1: createRenderer [00000150847C9A91] [C:\****\****\Desktop\MEAN STACK\Ng-1
\blog\dist\blog\server\main.js:~1] [pc=000003A6BF0102C6](this=0x02a68959f539 <p
atform_server_ServerRendererFactory2 map = 0000036DB8EC5ED9>,0x012cea722c29 <HT
LButtonElement map = 00000383BFA19079>,0x0298c6e98e51 <Object map = 0000019ACF0
1339>)
2: addComponentLogic(aka ad...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - Java
cript heap out of memory
1: 00007FF7AA7D286F napi_wrap+119263
2: 00007FF7AA779536 v8::internal::OrderedHashTable<v8::internal::OrderedHashSe
,1>::NextTableOffset+38102
3: 00007FF7AA77A336 node::OnFatalError+438
4: 00007FF7AAFB7B3E v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF7AAF9FCF1 v8::SharedArrayBuffer::Externalize+833
6: 00007FF7AAE514CC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
7: 00007FF7AAE5C710 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
8: 00007FF7AAE59224 v8::internal::Heap::PageFlagsAreConsistent+3204
9: 00007FF7AAE4EA23 v8::internal::Heap::CollectGarbage+1283
10: 00007FF7AAE4D094 v8::internal::Heap::AddRetainedMap+2500
11: 00007FF7AAE6E3DD v8::internal::Factory::NewFillerObject+61
12: 00007FF7AABD19D1 v8::internal::interpreter::JumpTableTargetOffsets::iterato
::operator=+1665
13: 00007FF7AB40D31D v8::internal::SetupIsolateDelegate::SetupHeap+546925
14: 000003A6BF0102C6
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! blog#0.0.0 serve:ssr: `node dist/blog/server/main.js`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the blog#0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional lo
ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Tony\AppData\Roaming\npm-cache\_logs\2021-08-24T16_40_37_
55Z-debug.log
How can I solve this issue? This is my Angular SSR below:
import 'zone.js/dist/zone-node';
const domino = require('domino');
// const proxyApp = require('./Backend/app');
import { ngExpressEngine } from '#nguniversal/express-engine';
import express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '#angular/common';
import { existsSync } from 'fs';
// import { createProxyMiddleware } from 'http-proxy-middleware';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/blog/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Shim for the global window and document objects.
const windowObj = domino.createWindow(indexHtml);
global.window = windowObj;
global.document = windowObj.document;
global.self = windowObj;
global.IDBIndex = windowObj.IDBIndex;
global.navigator = windowObj.navigator;
global.getComputedStyle = windowObj.getComputedStyle;
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
server.get('/api/**', (req, res) => {
res.status(404).send('data requests are not yet supported');
});
// re-route requests to /api/ to REST api
// server.use('/api/**', createProxyMiddleware({ target: 'http://localhost:8000', changeOrigin: true }));
// server.use(proxyApp);
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// console.log(appRoutes);
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
And this is the excerpt from my NodeJs/ExpressJs server below:
const express = require('express');
const path = require('path');
const cors = require('cors');
const mongoose = require('mongoose');
const config = require('./config');
const app = express();
const { db: { URL } } = config;
// const Post = require('./models/post');
const postsRouter = require('./routes/posts');
const userAuthRouter = require('./routes/user');
const adminAuthRouter = require('./routes/admin');
// const commentsRouter = require('./routes/comments');
const topicRouter = require('./routes/topic');
// MongoDB database settings
// Grab mongoDB Authentication password from env. var with obj destructuring and pass it on to mongoose.
const connectionOptions = { useUnifiedTopology: true, useNewUrlParser: true, useCreateIndex: true, /*useFindAndModify: false*/ };
// console.log(URL);
mongoose.connect(URL, connectionOptions )
.then(() => {
console.log('Connected Database');
})
.catch((err) => {
console.log('Connection Failed: ' + err);
});
const whitelist = ['http://localhost:4200', 'http://localhost:4000'];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
}
};
app.use(express.urlencoded({extended: true})); // Parse URL-encoded bodies
app.use(express.json());
// app.use(cors())
app.use(cors({ origin: corsOptions }));
app.use(userAuthRouter);
app.use(postsRouter);
app.use(adminAuthRouter);
// app.use(commentsRouter);
app.use(topicRouter);
app.use('/images', express.static(path.join('Backend/images')));
module.exports = app;
I am adding additional info. The postsRouter and api/posts and the route displayed when ng serve is used are shown below:
// Get all Posts handler
exports.getPosts = (req, res, next)=> {
async.parallel({
posts: function(callback) {
const pageSize = +req.query.pagesize;
const currentPage = +req.query.page;
const topic = req.query.topic;
// Get All Posts
if (pageSize && currentPage && topic) {
Post.find({'topic': topic})
.skip(pageSize * (currentPage - 1))
.limit(pageSize)
.sort({publishDate: 'desc'})
.exec(callback);
}
// Group Post Based On Topic
if (pageSize && currentPage && !topic) {
// console.log(topic + " : " + id + ' 2nd');
Post.find({}, ' -topicID')
.skip(pageSize * (currentPage - 1))
.limit(pageSize)
.sort({publishDate: 'desc'})
.exec(callback);
}
},
postCount: function(callback) {
Post.countDocuments(callback);
}
},
function(err, results) {
if (err) {
return res.status(500).json({message: 'ERROR: Fetching Posts Failed!'});
}
res.status(200).json({
posts: results.posts,
postCount: results.postCount,
});
});
};
// Post service: Angular
getPosts(groupedPostTopic = '', postsPerPage?: number, currentPage?: number): void {
// Backend Params for pagination
const placeHolder = groupedPostTopic ? `/posts?topic=${groupedPostTopic}&` : '/posts?';
const queryParam = `pagesize=${postsPerPage}&page=${currentPage}`;
// Call to the server
const posts$ = this.http.get<{posts: Post[], postCount: number}>(BACKEND_URL + placeHolder + queryParam)
.pipe(map((postData) => {
return { posts: postData.posts.map((post: any) => {
const textStyle = this.dateTextStyle(post.publishDate);
return {
id: post._id,
topic: post.topic,
title: post.title,
postIntro: post.postIntro,
content: post.content,
imagePath: post.imagePath,
dateTextStyle: textStyle,
publishDate: post.publishDate,
creator: post.creator,
comments: post.comments
};
}),
postCount: postData.postCount
};
}));
// Activate spinner service until data arrival
this.isLoadingService.showContentUntilCompleted(posts$)
.subscribe(transformedPosts => {
this.posts = transformedPosts.posts;
this.postCount = transformedPosts.postCount;
// Data stored to be Observed using BehaviorSubject and/or asObservable() from rsjx
this.subject.next({posts: [...this.posts], postCount: transformedPosts.postCount});
});
}
// Displayed route when 'ng serve' is used
http://localhost:4200/posts
***OR***
http://localhost:4200/posts/:pageNo // For pagination
Thanks in advance!