Angular server side rendering issue [Zone already loaded] - node.js

Question

I am able to build app for server side rendering but when i run server.ts file i get this error.
Commands:
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",
I tried to find zone.js in whole project but only find it in polyfills.js and server.ts file. I tried to comment and in server.ts file zone import line and build it again, but it din't work. I also tried to comment it in polyfills.js and build it again but it did not work.
I am not able to find issue what cause it? Any help would be appreciated. You can find some configuration file below. If you need any other file, comment it.
This issue only occurs when i tried to implement server side rendering. Otherwise without it, it is working fine.
.angular-cli.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0",
"name": "demo"
},
"apps": [
{
"root": "src",
"outDir": "dist/browser",
"assets": [
"assets"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/simple-line-icons/css/simple-line-icons.css",
"scss/style.scss",
"../node_modules/primeng/resources/themes/omega/theme.scss",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
"../node_modules/npm-font-open-sans/open-sans.scss"
],
"scripts": [
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"platform": "server",
"root": "src",
"outDir": "dist/server",
"assets": [
"assets",
"assets"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/simple-line-icons/css/simple-line-icons.css",
"scss/style.scss",
"../node_modules/primeng/resources/themes/omega/theme.scss",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
"../node_modules/npm-font-open-sans/open-sans.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}
webpack.server.config.js
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 libraries
externals: [/(node_modules|main\..*\.js)/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{ test: /\.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } }
]
},
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'),
{}
)
]
}
server.ts
//import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '#angular/platform-server';
import { enableProdMode } from '#angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
// 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');
// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
const { provideModuleMap } = require('#nguniversal/module-map-ngfactory-loader');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
// Our index.html
document: template,
url: options.req.url,
// DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
// 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}`);
});
Package.json
{
"name": "test",
"version": "1.0.0",
"description": "desc",
"author": "",
"homepage": "http://www.test.com/",
"copyright": "Copyright 2017",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port=3333 --live-reload false",
"build": "ng build --prod --aot=true",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",
"compile": "node_modules\\.bin\\webpack.cmd"
},
"private": true,
"dependencies": {
"#angular-devkit/core": "^0.6.0",
"#angular/animations": "5.2.0", // old: 5.2.3
"#angular/common": "5.2.0", // old: 5.2.3
"#angular/compiler": "5.2.0", // old: 5.2.3
"#angular/core": "5.2.0", // old: 5.2.3
"#angular/forms": "5.2.0", // old: 5.2.3
"#angular/http": "5.2.0", // old: 5.2.3
"#angular/platform-browser": "5.2.0", // old: 5.2.3
"#angular/platform-browser-dynamic": "5.2.0", // old: 5.2.3
"#angular/platform-server": "5.2.0", // old: 5.2.3
"#angular/router": "5.2.0", // old: 5.2.3
"#angular/upgrade": "5.2.0", // old: 5.2.3
"#nguniversal/module-map-ngfactory-loader": "^5.0.0",
"#swimlane/ngx-charts": "^7.1.1",
"amazon-cognito-identity-js": "^2.0.2",
"aws-sdk": "^2.212.1",
"bootstrap": "4.0.0",
"core-js": "2.5.3",
"d3": "^5.0.0",
"font-awesome": "^4.7.0",
"moment": "2.20.1",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "2.0.2",
"ngx-loading": "^1.0.14",
"ngx-treeview": "^2.0.5",
"npm-font-open-sans": "^1.1.0",
"primeng": "^5.2.0-rc.2",
"regexp-replace-loader": "^1.0.1",
"rxjs": "5.5.6",
"simple-line-icons": "^2.4.1",
"string-replace-loader": "^2.1.1",
"ts-helpers": "1.1.2",
"ts-loader": "^4.2.0",
"webpack": "^4.6.0",
"webpack-dev-server": "^3.1.1",
"zone.js": "0.8.12" // old: 0.8.20
},
"devDependencies": {
"#angular/cli": "1.6.3", // old: 1.6.6
"#angular/compiler-cli": "5.2.0", // old: 5.2.3
"#types/jasmine": "2.8.6",
"#types/node": "^10.0.3",
"codelyzer": "4.1.0",
"jasmine-core": "2.9.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.4.1",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.3.0",
"ts-node": "4.1.0",
"tslint": "5.9.1",
"typescript": "^2.6.0-rc", // old: 2.6.6
"webpack-cli": "^2.1.2"
},
"engines": {
"node": ">= 6.9.0",
"npm": ">= 3.0.0"
}
}

Answer 1

To fix this you have to search for zone.js/dist/zone import in node modules and then you have two variants to fix this. First is to comment this import or just update library (in my case (ng2-dnd) in a new release this line was gone). But I'm pretty sure that when you fix this error you'll get something like "Cannot find module '.'". This error was caused by #swimlane/ngx-charts library. Some charts cause an error, in my case it's ngx-charts-line-chart.
Hope this will be helpful for you and will save someone's time in the future (I waste three days to solve this).

Answer 2

This issue will be better handled in the next version of zone.js, if zone is loaded, we will not throw error when reloading.