$ npm install --save @angular/platform-server @nguniversal/ module -map-ngfactory-loader ts-loader @nguniversal/express-engine

BrowserModule.withServerTransition({ appId : 'your App-ID' }),

import { NgModule } from '@angular/core' ;
import { ServerModule } from '@angular/platform-server' ;
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader' ;import { AppModule } from './app.module' ;
import { AppComponent } from './app.component' ;@NgModule({imports : [AppModule,ServerModule,ModuleMapLoaderModule],providers : [// Add universal-only providers here],bootstrap : [ AppComponent ],
})
export class AppServerModule  {}

// These are important and needed before anything else
import 'zone.js/dist/zone-node' ;
import 'reflect-metadata' ;import { enableProdMode } from '@angular/core' ;import * as express from 'express' ;
import { join } from 'path' ;// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();// Express server
const app = express();const PORT = process.env.PORT || 4000 ;
const DIST_FOLDER = join(process.cwd(), 'dist' );// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require ( './dist/server/main.bundle' );// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine' ;
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader' ;app.engine( 'html' , ngExpressEngine({bootstrap : AppServerModuleNgFactory,providers : [provideModuleMap(LAZY_MODULE_MAP)]
}));app.set( 'view engine' , 'html' );
app.set( 'views' , join(DIST_FOLDER, 'browser' ));// TODO: implement data requests securely
app.get( '/api/*' , (req, res) => {res.status( 404 ).send( 'data requests are not supported' );
});// Server static files from /browser
app.get( '*.*' , express.static(join(DIST_FOLDER, 'browser' )));// All regular routes use the Universal engine
app.get( '*' , (req, res) => {res.render(join(DIST_FOLDER, 'browser' , 'index.html' ), { req });
});// Start up the Node server
app.listen(PORT, () => {console .log( `Node server listening on http://localhost: ${PORT} ` );
});

{"extends" : "../tsconfig.json" ,"compilerOptions" : {"outDir" : "../out-tsc/app" ,"baseUrl" : "./" ,"module" : "commonjs" ,"types" : []},"exclude" : ["test.ts" ,"**/*.spec.ts"],"angularCompilerOptions" : {"entryModule" : "app/app.server.module#AppServerModule"}
}

const path = require ( 'path' );
const webpack = require ( 'webpack' );module .exports = {entry : { server : './server.ts' },resolve : { extensions : [ '.js' , '.ts' ] },target : 'node' ,// this makes sure we include node_modules and other 3rd party librariesexternals: [ /(node_modules|main\..*\.js)/ ],output : {path : path.join(__dirname, 'dist' ),filename : '[name].js'},module : {rules : [{ test : /\.ts$/ , loader : 'ts-loader' }]},plugins : [// Temporary Fix for issue: https://github.com/angular/angular/issues/11580// for 'WARNING Critical dependency: the request of a dependency is an expression'new webpack.ContextReplacementPlugin(/(.+)?angular(\\|\/)core(.+)?/ ,path.join(__dirname, 'src' ), // location of your src{} // a map of your routes),new webpack.ContextReplacementPlugin(/(.+)?express(\\|\/)(.+)?/ ,path.join(__dirname, 'src' ),{})]
};

"apps" : [{"root" : "src" ,"outDir" : "dist/browser" ,"assets" : [ "assets" , "favicon.ico" ],"index" : "index.html" ,"main" : "main.ts" ,"polyfills" : "polyfills.ts" ,"test" : "test.ts" ,"tsconfig" : "tsconfig.app.json" ,"testTsconfig" : "tsconfig.spec.json" ,"prefix" : "app" ,"styles" : [ "styles.css" ],"scripts" : [],"environmentSource" : "environments/environment.ts" ,"environments" : {"dev" : "environments/environment.ts" ,"prod" : "environments/environment.prod.ts"}},{"platform" : "server" ,"root" : "src" ,"outDir" : "dist/server" ,"assets" : [ "assets" , "favicon.ico" ],"index" : "index.html" ,"main" : "main.server.ts" ,"test" : "test.ts" ,"tsconfig" : "tsconfig.server.json" ,"testTsconfig" : "tsconfig.spec.json" ,"prefix" : "app" ,"styles" : [ "styles.css" ],"scripts" : [],"environmentSource" : "environments/environment.ts" ,"environments" : {"dev" : "environments/environment.ts" ,"prod" : "environments/environment.prod.ts"}}
],

"scripts" : {..."build:universal" : "npm run build:client-and-server-bundles && npm run webpack:server" ,"serve:universal" : "node dist/server.js" ,"build:client-and-server-bundles" : "ng build --prod && ng build --prod --app 1 --output-hashing=false" ,"webpack:server" : "webpack --config webpack.server.config.js --progress --colors" ,...
}

npm run build:universal

npm run serve:universal