How to remove or replace all console.log in Angular SSR - node.js

Question

I've built an angular project with CLI. when I run the project It shows all console.log that I used in development mode. Then I googled and found a solution. Replaced with empty function in the production mode by adding two lines of code in main.ts file:
if (environment.production) {
enableProdMode();
if (window) {
window.console.log = window.console.warn = window.console.info = window.console.debug = function () {/* no log */ };
}
}
It helps me to get rid out of that problem in production mode and saves a lot of time of removing all console.log lines manually. So, I added those lines in main.server.ts file also to solve the problem in SSR.
But, the problem is when I build with angular SSR and run the project it returns errors:
ReferenceError: window is not defined
at Object.K011 (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:176367)
at __webpack_require__ (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:295)
at Object.0 (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:5525)
at __webpack_require__ (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:295)
at +JNS (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:1624)
at Object.<anonymous> (C:\xampp\htdocs\10MS\10-minute-school-3.0\dist\server\main.js:1:1669)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
I understand the problem that there is no global window variable in nodejs. But, I need to remove all console.log lines. How can I able to remove all console.log lines in SSR build.

Answer 1

Instead of doing it in the main.ts file, you can override the console methods (log, warn, error, etc) in the app.module.ts file just before the app is initialized. This can be done using the APP_INITIALIZER injector token that allows you run some custom initialization logic needed for your app.
The PLATFORM_ID is another injector token that is provided by the Angular once the platform is initialized (platform can be server, browser or web worker) and it is available before application initialization. Using this token we can determine the platform using the isPlatformBrowser(platformId) method which returns true if the platform is a browser.
We can combine the above 2 strategies to override the console methods as below.
app.module.ts
import {
NgModule,
Injector,
APP_INITIALIZER,
PLATFORM_ID
} from "#angular/core";
import { isPlatformBrowser, isPlatformServer } from "#angular/common";
import { environment } from '../environments/environment';
...
/**
* Factory method to override the console methods
* during app initialization
*/
function silenceConsoleMethods(injector: Injector) {
return () => {
const platformId = injector.get(PLATFORM_ID);
if (isPlatformBrowser(platformId) && environment.production) {
window.console.log = window.console.debug = window.console.warn = window.console.error = () => {};
} else if (isPlatformServer(platformId)) {
console.log = console.debug = console.warn = console.error = () => {};
}
};
}
#NgModule({
...
providers: [
{
provide: APP_INITIALIZER,
useFactory: silenceConsoleMethods,
deps: [Injector],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
You can find a working version of the above example in Stackbliz here. To demonstrate the solution works, I have overriden all console logging methods except error to show the error messages on console.
P.S:
You can use isPlatformServer(platformId) to determine if the platform is server and perform any initialization logic related to server side rendering.
Edit:
Updated silenceConsoleMethods() in the app.module.ts file to override the console object when the app is rendered using Nodejs runtime. Now you should not face any problem when the app is rendered on server side.