Angular – Disable console.log() in production

Most of the developers use console.log() to debug a problem in our angular application. After we solve the problem most of the times we use to forget to remove these logs and it goes to production. In this blog, we’ll explore how to disable this console logs in production with minimal changes.

There are multiple ways of doing it.

• Disable in main.ts file
• Create a logger service and disable the console logs in production.
• Write a linting rule and make the build fail in CI

Disable in main.ts file

💡 @angular Tip 💡
Disable console.log in production build with just three lines of code!#angular pic.twitter.com/g8eFr3vfAp

— Suhas – devsuhas.com(MVP)😎 (@suhas_paramesh) February 11, 2023

Create a logger service and disable the console logs in production

Incase if you don’t want to do disable it in your main.ts file, you can create a ConsoleLogger service.

And in your app.component.ts file, inject the ConsoleLogger service and call the respective function to disable the logs in production

Write a linting rule and make the build fail in CI

You can use a linter rule such as no-console to disallow the use of console.log() in production. Let’s say if you have tslint.json or eslint.json you can mention the below rule in the respective file.

{
  "rule":{
     "no-console":"error"
  }
}

Once you mention this rule, you can run the below command to fail the build

npm run lint

The above command will lint all the files and tries to find if there are any console.log() in your *.ts.files.

Those were the methods of how you can disable console.log in production. Let me know if you have any other methods of doing it.

Happy Learning! Cheers!