Stripping all comments and console.logs with ng build --prod, possible?

Question

I am using MEAN, Angular 2, Node/Express, Angular-CLI and ng build --prod to build my app and I have a travesty of commented out throwaway code and a billion debugging console.log statements throughout my app. Is there a way to have the build process remove all comments and console.log statements when it builds? The thought of doing it manually is scary!

Answer 1

I have simple fix. Put this code in main.ts

if(env === 'prod') { // assuming you have env variable configured
  // check if window exists, if you render backend window will not be available 
  if(window){
      window.console.log = function(){};
   }
}  

Answer 2

Simply add this window.console.log = function(){}; to `

if (environment.production) {
    enableProdMode();
}`

Answer 3

You can use ng lint with --fix flag and no-console rule in tslint configuration file. And hook it to your build call in your package file.

eg.: ... "prebuild": "ng lint --fix", "build": "ng build -prod", ...

and build the app

npm run build

ref: https://github.com/angular/angular-cli/wiki/lint

Answer 4

Another not completely explained option is (if linting or custom webpack isn't the way to go):

To strip the log statements from the code by your build.

So, here is what I have done (I use nx on top of Angular CLI):

1. Adding a custom script that cleans all console.log calls

utils/clean-console.log.js

const glob = require('glob');
const replace = require('replace');

// list all directories you want to scan
// (I have a nx mono.repo with multiple involved projects & libs)
[
    './apps/<app>/src/**/*.ts',
    './libs/*/src/**/*.ts',
].forEach(pattern => glob(pattern, (err, files) => {
    if (err) {
        throw err;
    }
    files.forEach(item => replace({
        // change to your needs which levels you want to strip
        // the levels listed are removed from code
        regex: /.*console\.(log|info|debug|warn)\([^\)]*\);?.*/gm,
        replacement: '',
        paths: [item],
    }));
}));

2. Updating package.json for my build command

node utils/clean-console.log.js && nx run <app>:build:prod

---

This works for me pretty nicely (even for multiline log statements) since I have a consistent code style. Every log statement is followed by a new line. If you don't have that, you can't use the script right ahead.

Btw. you change the code with this. But for me in pipeline context it doesn't matter since every build will be checked out again & what happens to the code inside the pipeline doesn't matter. Only the compiled output does matter...

Answer 5

Don't forget to do the same for the other consoles

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

Answer 6

You can hide all the console.log() in production (angular) by two ways.

They are

1. hiding throughout the angular app
2. hinding them in particular component only.

• Hiding throughout the app

open main.ts file and add the following lines inside production check condition

if (environment.production) {
  enableProdMode();

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

or

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

• Hiding in particular component only

Open that component's component.ts file and add the following code inside ngOnInit life cycle hook

import { isDevMode } from '@angular/core';
....

ngOnInit() {
    if (!isDevMode()) {
      console.log = function() {};
    }
}

This will hide them only in that particular component.

If you wanna hide them in IE, please check this

if you get linting error for not using normal function, replace it with the following arrow function

console.log = () => {};