Express web server no response - node.js

Question

I'm trying to run my Angular app in Server Side Rendering via Angular Universal.
This is the JS file that Angular Universal generated, I just edited the path and port:
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/main.server';
import { APP_BASE_HREF } from '#angular/common';
import { existsSync } from 'fs';
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
const distFolder = process.cwd();
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// 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
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// 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() {
const port = process.env.PORT || 4001;
// 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';
The folder structure is fine, I run this on server:
> node .\server.js
Node Express server listening on http://localhost:4001
When I hit the site it just shows loading until it timeouts.
Express logs this on console:
DEPRECATED: DI is instantiating a token "ngmodule_material_carousel_MatCarouselHammerConfig" that inherits its #Injectable decorator but does not provide one itself.
This will become an error in v10. Please add #Injectable() to the "ngmodule_material_carousel_MatCarouselHammerConfig" class.
(node:6896) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
DEPRECATED: DI is instantiating a token "ngmodule_material_carousel_MatCarouselHammerConfig" that inherits its #Injectable decorator but does not provide one itself.
This will become an error in v10. Please add #Injectable() to the "ngmodule_material_carousel_MatCarouselHammerConfig" class.
Edit:
After removing the #ngmodule/material-carousel library from project I still get the Buffer warning but now I can see the website.

Answer 1

There is an open issue on github for that, it looks like the library does not support angular universal.
As a workaround, if you really want to use that library, you can avoid rendering the carousel if you are server side
component.html
<mat-carousel *ngIf="isBrowser" ></mat-carousel>
component.ts
import { isPlatformBrowser } from '#angular/common';
import {PLATFORM_ID} from '#angular/core';
public isBrowser: boolean;
constructor( #Inject(PLATFORM_ID) public platformId)
{
this.isBrowser = isPlatformBrowser(this.platformId);
}

Answer 2

The problem was the material-carousel library. I had to copy the necessary files from the project's GitHub to my project. The following files were needed:
carousel-slide.component.html
carousel-slide.component.scss
carousel-slide.component.ts
carousel-slide.ts
carousel.component.html
carousel.component.scss
carousel.component.ts
carousel.ts
_mixins.scss
These components require Angular Material so if you are not using the Angular Material in your project instead of ng add #angular/material which changes your project, run the following:
npm install #angular/material #angular/cdk #angular/animations
And finally add the necessary components to your module:
#NgModule({
declarations: [
...
MatCarouselComponent,
MatCarouselSlideComponent
],
imports: [
...
MatButtonModule,
MatIconModule
],
...
})
export class AppModule { }