Question

在我们的Angular应用程序（使用Angular CLI制作）中，我们使用了几个console语句。是否存在检测环境的全局方法，然后仅在开发中在我们的组件和服务中显示console.log？

我的意思是全球化的方式 - 我知道我们可以使用类似的东西：

if (!environment.production) {
  console.log(this.reviewTasksList);
}

但是每次我们必须console.log使用此代码（以及必要的导入以获取environment变量），我们的代码将变得冗长。

我想知道是否有办法：

以更快的方式访问环境
也许在prod build time删除所有控制台日志

或者更好的解决方案是创建一个记录器服务并在其中进行所有环境检查？

我不希望我的包大小受到调试语句和服务的影响。

Answer 1

这将覆盖所有具有空白功能的控制台日志。

if (environment.production) {
  enableProdMode();
  window.console.log = function () { };   // disable any console.log debugging statements in production mode
  // window.console.error = function () { };

}

Answer 2

或者，您可以使用常用服务来实现此目的

this.loggerService.log(this.reviewTasksList);

在您的服务中，您可以使用

log(text: string){
     if (!environment.production) {
       console.log(text)
     }
}

Answer 3

您可以使用isDevMode()或environment.production来检查代码是在开发模式还是生产模式下运行。

我认为记录器服务是个好主意，然后根据模式在提供商中注册不同的记录器服务。

另见https://github.com/angular/angular/pull/14308

Answer 4

如果你在开发模式下覆盖console.log会怎么样？

 if (! isDevMode()){
   console.log = (...args)=>{}
 }

Answer 5

我为此使用LoggingService：

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

export interface ILoggerService {
    log(message?: any, ...optionalParams: any[]): void;
}

@Injectable()
export class LoggerService implements ILoggerService {
    log(message?: any, ...optionalParams: any[]): void {
        if (!environment.production)
            console.log(message, ...optionalParams);
    }
}

我的日志记录方法支持基本console.log支持的所有内容-包括多个args和样式。

PS：您可以实现Console而不是ILoggerService，然后根据需要覆盖所有基本方法。

Answer 6

首先，存储console.log，错误和调试，然后使用空白函数() => {}覆盖它们。如果您要检查生产中的任何错误，这将有所帮助。

if (environment.production) {
    if (window) {
        window['log'] = console.log;
        window['error'] = console.error;
        window['debug'] = console.debug;
    }

    console.log = console.debug = console.error = () => { };
}

要检查生产中的控制台，请编写console.log = log;浏览器控制台。这将临时使用console.log。

Answer 7

我创建了一个解决方案，该解决方案可以具有不同的设置，以根据运行应用程序的环境来控制控制台日志。您可以在开发环境中定义选择的设置，而在生产环境中定义其他设置。安装@ sedeh / smart-service，然后在您的应用程序组件中注入SmartConsoleService并将您的设置传递给它。其余的一切都为您完成。任何控制台日志都将按照您的规范进行处理。检出Smart-console，让我知道是否还需要包含其他内容。

Answer 8

您可以这样做：

export abstract class Logger {

    abstract info(message: string, context?: object);
  ...more methods here...   
}

@Injectable()
export class ConsoleLogger implements Logger {

    constructor( @Inject(CONSOLE) private console: any) {
    }

    info(message: string, context?: object) {
        this.console.info(message, context ? context : '');
    }
}

@Injectable()
export class ServerLoggerService implements Logger {

    constructor(private http: HttpClient) {
    }

    info(message: string, context?: object) {
        this.http.post(...).subscribe();
    }
}

现在在模块中实例化工厂：

export function loggerFactory(console, http) {
  return environment.production ?
         new ServerLoggerService(http) :
         new ConsoleLoggerService(console);
}

Answer 9

我真的不知道更好的方法。就我而言...我使用

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

并使用：

isDevMode && console.log('bla bla bla bla');

我不太喜欢..但是我发现没有编写太多代码就没有透明的另一条路了。

Answer 10

我在项目中使用了此解决方案，它可能不是最优雅的，但它速度很快并且不需要修改window.console对象。

loggs.ts

import { isDevMode } from "@angular/core";

export const loggs = () => {
  if (isDevMode) {
    window["LOG"] = (...args: any[]) => {
      const date = new Date();
      const minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      const seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      const hours = `${date.getHours()}:${minutes}:${seconds}`;
      console.groupCollapsed(hours);
      console.warn.apply(console, args);
      console.groupEnd();
    };
  } else {
    window["LOG"] = () => {};
  }
};

在根模块（AppModule）

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
//Others imports
import { loggs } from "./loggs";

loggs();

最后一步是任何组件，服务等。

Ex：在AppComponent中

import { Component, OnInit } from "@angular/core";

declare var LOG: any; //<----HERE

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent implements OnInit {

constructor(){}

ngOnInit() {
    LOG("Upsi!");
  }

}

我希望它对某人有用，问候！

Answer 11

在您的main.ts中进行更改：

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

对此：

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

现在，当您在生产中时，您的console.logs将消失。希望对您有所帮助，它将为您节省大量进口;）

Angular控制台仅记录开发环境

11 个答案: