我在console.log
有Angular 2 app
消息。我想在console.log
有dev
但在production
没有所以我创建了Logger service
如下:
logger.service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
@Injectable()
export class LoggerService {
log(msg): void {
if (!environment.production) {
console.log(msg);
}
}
error(msg): void {
console.error(msg);
}
warn(msg, options): void {
if (!environment.production) {
if (options) console.warn(msg, options);
else console.warn(msg);
}
}
}
app.component.ts
import { Component, NgModule, OnInit } from '@angular/core';
import { environment } from '../environments/environment';
import { LoggerService } from './shared/services/logger.service';
@Component({
selector: 'web-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private _logger: LoggerService) {
_logger.log("This is my test logger !!");
}
}
我对这种方法有疑问:
Dev
中所有消息都从logger.service.ts
文件中记录下来,这是正确的,但它使得调试很难找到实际的记录位置(文件,行号)。 [在我的情况下,我有logger.service.ts
文件,但在console
它显示另一个文件名]
对此有何建议?
这种方法只是在控制台对象中添加额外的delaing层,您需要在每个组件中注入记录器服务并使调试更加困难,但您可以通过更改日志,错误,热属性并冻结对象来简单地禁用控制台对象所以它变得不可改变了
考虑一下
main.ts
if (environment.production) {
enableProdMode();
let disFunc = () => 'console has been disabled in production mode';
console.log = disFunc
console.error = disFunc
console.warn = disFunc
Object.freeze(console);
}
这样你只需正常使用控制台对象。