Carlos Cifuentes
AngularJS → Angular reference

$log in modern Angular

Angular has no $log service. Call console directly, or write a small logging service when you need to control levels or forward errors.

Before · AngularJS
app.config(function ($logProvider) {
  $logProvider.debugEnabled(false);
});

app.service('OrderService', function ($log) {
  this.save = function (order) {
    $log.debug('Saving order', order.id);
    $log.error('Save failed', order.id);
  };
});
After · Angular
@Injectable({ providedIn: 'root' })
export class LoggerService {
  private debugEnabled = isDevMode();

  debug(...args: unknown[]) {
    if (this.debugEnabled) { console.debug(...args); }
  }

  error(...args: unknown[]) {
    console.error(...args);
    // forward to your monitoring tool here
  }
}

What changes

  • $log.debug, info, warn and error map to the console methods of the same name.
  • $logProvider.debugEnabled(false) becomes a flag in your own service, for example based on isDevMode().
  • Decorators on $log that sent logs to a server become a method of the logging service.

Migration tip. A thin logging service is worth having: one place to silence debug output in production and to connect a monitoring tool. Keep it small and resist building a logging framework.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn