Encountering an error in VS Code while working on an Angular 13 app that utilizes Angular Universal for Server Side Rendering. The specific error message is:
Property 'listen' does not exist on type 'Express'.ts(2339)
This error occurs at the line: server.listen(port, () => { in the file server.ts as shown below:
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global['window'] = mock.getWindow();
global['document'] = mock.getDocument();
global['navigator'] = mock.getNavigator();
import 'globalthis/auto';
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/src';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// Exporting the Express app for potential serverless Functions usage.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/bbc/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Implementing our Universal express-engine
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example API endpoints with Express
// server.get('/api/**', (req, res) => { });
// Serving static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// Using the Universal engine for all regular routes
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;
// Launching the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
The codebase employs Typescript 4.4. Open to suggestions on modifications required in the server.ts file.