Angular: How to remove console log from production build

By using Angular CLI it is very easy to build your production app by using ng build --prod, but you will notice that console.log statements are not deleted from production files. So how to delete all console.log from production build of your Angular project?

There are some solutions on the internet like overriding console.log with an empty function, but that does not feel right. The best way would be just to tell Angular, please remove all of my console.log during build for production. But how to do that?

Well, under the hood Angular is using webpack module bundler:

a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

... and this is used behind the scenes when you run ng build as well. So can we just find the webpack configuration file and add couple lines to remove our console.logs? Well not that easy, but we are on right tracks.

In order to achieve our goal, we have to install custom-webpack angular builder and hook into build process and then use settings from our custom webpack config file.
So first let's pull custom webpack from
https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack
install plugin:

npm i -D @angular-builders/custom-webpack

Now let's add our custom webpack to build command.Go into angular.json and replace "builder": "@angular-devkit/build-angular:browser" for our custom-webpack builder:

"architect": {
  "build": {
    //"builder": "@angular-devkit/build-angular:browser",
    "builder": "@angular-builders/custom-webpack:browser",

OK, now we will add configuration to our custom builder. In same file (angular.json) in options, add custom configuration customWebpackConfig :

"architect": {
  "build": {
    //"builder": "@angular-devkit/build-angular:browser",
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js",
        "mergeStrategies": {
          "externals": "replace"
        }
      },
      "outputPath": "dist/angular",
      "index": "src/index.html",
      "main": "src/main.ts",

      ...

As you can see, here we are defining custom webpack configuration file: extra-webpack.config.js. This file we need to create in root folder (same one where angular.json is placed).
OK so now we can hook in into angular webpack and set some of our own configuration. It is important to know that, if no configuration is set, plain Angular build will run.

In order to remove console logs from our Angular production files, we will use terser-webpack-plugin. This plugin will allow us to remove console.logs, but this is just one of the many feature which you can use. Please check the documentation on https://github.com/webpack-contrib/terser-webpack-plugin

So let's pull this baby down:

$ npm install terser-webpack-plugin --save-dev

Now let's go to our extra-webpack.config.js and write some settings by using terser plugin:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        terserOptions: {
          compress: {
            drop_console: true, // will remove console.logs from your files
          },
        },
      }),
    ],
  },
};

If you now run ng build, your angular application will run trough our custom webpack config and remove all console.logs.

But now when you can hook into webpack configuration, there are many cool things that you can do with your app. Take a look at list of webpack plugins and maybe you will find something interesting:
https://webpack.js.org/plugins/