I'm struggling with getting my Angular app to work with server-side rendering using Angular Universal (https://angular.io/guide/universal). Despite bundling the app and running it through Express, when I visit http://localhost:4000, it just keeps loading until I eventually see an ERR_EMPTY_RESPONSE from the browser
I've tried various solutions without success. Any help or guidance on this issue would be greatly appreciated.
Here are some details from my code:
package.json
{
"name": "my-app",
"version": "3.0.0",
"author": "N/A",
...
}
src/app/app.module.ts
import { NgModule } from '@angular/core';
...
export class AppModule {}
src/app/app.server.module.ts
import { NgModule } from '@angular/core';
...
export class AppServerModule {}
main.server.ts
export { AppServerModule } from './app/app.server.module';
tsconfig.server.json
...angular.json
...After implementing these changes, I was able to successfully bundle the browser and server distributions using
ng build --prod && ng run my-app:server
Here's a snippet from my server.ts
...and the contents of webpack.server.config.js
...Running
npm run build:ssr && npm run serve:ssr
leads to http://localhost:4000 which results in continuous loading leading to an ERR_EMPTY_RESPONSE