在生产中禁用 console.log()

Question

我运行在我的 angular 应用程序中禁用生产环境的控制台日志。下面的代码在 chrome 中按预期工作，但是，它仍然在 IE 11 中显示日志。

main.ts

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

这是 polyfill 问题吗？我无法在网上找到任何相关信息。

编辑

这个 question 可能看起来很相似，但没有解决我的问题，即为什么将控制台日志功能覆盖为空白方法在 chrome 而不是 IE 11 中有效。

Answer 1

解决方案是将 polyfill 添加到您的 polyfill.ts 文件

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

Answer 2

我在Utility.tsclass中添加了自定义日志功能如下

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

其中 _env 变量在 CoreService 中定义并在应用程序内部赋值。组件如下

this.coreService.env = environment.env;

在environment.ts文件中定义env如下

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

我的组件正在使用

Utility.log("Print the value");

这样，您可以轻松地防止生产日志。

Answer 3

问题已得到解答，答案已被接受，但我想向您展示一种更好的方法，以 disable/switch-off console.log 投入生产。在 src/envirenmonts 下添加一个 environment.ts，内容如下：

export const environment = {
  production: false,

  mode: 'Dev'
}

在main.ts中导入envirenmontconst:

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

现在添加以下内容code-snippet：

..

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

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

要尝试这个，在 app.component.ts:[=15 的构造函数中添加一个 console.log =]

...
@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?')
  }
}

把environment.production换成true/false看看结果这是一个有效的 stackblitz

Answer 4

我为这样的问题创建了一个小库：deblog。您不必重写控制台对象方法。

您可以创建控制台对象的包装器并定义适当的日志记录方法，您可以根据需要进行配置并在生产中禁用它们：

例如，您可以这样做：

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

在生产中禁用 console.log()

Disabling console.log() in production

internet-explorer

typescript

angular-cli

angular5