Disabling console.log() in production

Question

I have run the following to disable console logs for production environments in my angular application. The below code works as expected for chrome, however, it still shows logs in IE 11.

main.ts

if (environment.production) {
  enableProdMode();
if(window){
  window.console.log=function(){};
 }
}

Is this a polyfill issue? I wasn't able to find anything online about it.

EDIT

This question may seem similar but does not address my issue as to why overriding the console log function to a blank method works in chrome but not IE 11.

Answer 1

The question has been answered and the answer has been accepted, but I want to show you a better way to disable/switch-off console.log in production. under src/envirenmonts add an environment.ts with the following content:

export const environment = {
  production: false,

  mode: 'Dev'
} 

In the main.ts import the envirenmont const:

import './polyfills';
...
import { environment } from './environments/environment';

Now add the following code-snippet:

..

if (environment.production) {
      window.console.log = () => { }
}

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  ...
}).catch(err => console.error(err)); 

To try this, add a console.log in the constructor of the app.component.ts:

...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ...
  constructor() {    
    console.log('How to switch off logging in Production?')
  }
}

Switch the environment.production to true/false to see the result Here is a working stackblitz

Answer 2

Solution is to add the polyfill to your polyfill.ts file

if(!window.console) {
 var console = {
  log : function(){},
  warn : function(){},
  error : function(){},
  time : function(){},
  timeEnd : function(){}
 }
}

Answer 3

I have added a custom log function in Utility.ts class as follows

    public static log(strValue: string) {
    if (CoreService._env !== 'prod') {
      console.log(strValue);
    }
  }

Where _env variable defined in CoreService and assigned value inside app. component as follows

this.coreService.env = environment.env;

In environment.ts file define env as follows

export const environment = { env: 'dev'} // for production it will be 'prod'

And my component is using

Utility.log("Print the value");

That way, you can easily prevent logs on production.

Answer 4

I have cretated a little library for issues like this: deblog. You don't have to rewrite the console object methods.

You can create a wrapper of the console object and define proper methods for logging that you can configure as you wish and disable them for production:

For instance, you can do something like this:

import { createDeblog } from "deblog";

const configuration = {
  logs: [
    {
      name: "foo",
      level: "debug",
      tag: "FOO -",
      enabled: true,  // <- THIS can be set using a PRODUCTION_LOG variable set to "false"
    },
    {
      name: "bar",
      level: "log",
      tag: `[${new Date(Date.now()).toLocaleTimeString()}] BAR -`,
    },
  ],
};

let dlog = createDeblog(configuration);

dlog.disableAllBut("bar"); // Silencing all logs but bar

dlog.foo("1 Connection Error"); // Will not be logged
dlog.bar("I'm here!");
dlog.foo("2 Connection Error"); // Will not be logged
dlog.bar("I just need bar logs here");

dlog.restoreAll();

dlog.bar("4 Connection Error"); // Will be logged

Answer 5

This solution for works for all Angualr, ReactJS, VueJS and Vanilla JavaScript etc.

You can enable / disable by this way!

console.log("Before disabled logs");

const consoleLog = false

if(!consoleLog) {
  console.log = function() {} 
}

console.log("After disabled logs #1");
console.log("After disabled logs #2");

Answer 6

    import { Injectable } from '@angular/core';
    import { environment } from 'src/environments/environment';
     
    @Injectable({ providedIn: 'root' }) 
    
    export class ConsoleToggleService { 
       constructor() {}
    
       disableConsoleInProduction(): void { 
         if (environment.production) {
           console.warn(` Console output is disabled on production!`);
           console.log = function (): void { };
           console.debug = function (): void { };
           console.warn = function (): void { };
           console.info = function (): void { };
         }
       }
    }

Finally, in your AppComponent, inject the ConsoleToggleService and call the disableConsoleInProduction() function in the constructor, like this:

export class AppComponent {
  constructor(private consoleToggleService: ConsoleToggleService) {
     this.consoleToggleService.disableConsoleInProduction();
  }
}