Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noemi-salaun/ng-logger
Angular logger service
https://github.com/noemi-salaun/ng-logger
angular angular2 angular8 angular9 log logger logging ng ng-logger typescript
Last synced: 11 days ago
JSON representation
Angular logger service
- Host: GitHub
- URL: https://github.com/noemi-salaun/ng-logger
- Owner: noemi-salaun
- Created: 2016-09-17T11:33:45.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:28:01.000Z (over 1 year ago)
- Last Synced: 2024-04-14T17:44:55.252Z (7 months ago)
- Topics: angular, angular2, angular8, angular9, log, logger, logging, ng, ng-logger, typescript
- Language: TypeScript
- Homepage:
- Size: 1.24 MB
- Stars: 63
- Watchers: 2
- Forks: 13
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular-components - @nsalaun/ng2-logger - Angular 2 logger service. (Uncategorized / Uncategorized)
README
# ng-logger
[](https://travis-ci.org/noemi-salaun/ng-logger)
[](https://www.npmjs.com/package/@nsalaun/ng-logger)
[](https://david-dm.org/noemi-salaun/ng-logger?type=dev)
[](https://david-dm.org/noemi-salaun/ng-logger?type=peer)
[](https://github.com/noemi-salaun/ng-logger/blob/master/LICENSE)
**ng-logger** is a simple Angular logger service that responds to two needs :
- A log level system to be able to disable certain calls as needed. *We do not want to see our debug trace on production.*
- A logger that keeps trace of the original log call. *We do not want all our logs to be referenced in some `logger.service.js` all the time.*
This package is compatible with **Angular 12** and above, [Angular AoT compiler](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) and [Angular CLI](https://cli.angular.io/).
## Installation
### 1 - Install the npm package.
```shell
npm install --save @nsalaun/ng-logger
```
### 2 - Import `NgLoggerModule` in your application and use `forRoot(level: Level)` to choose your log level :
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
@NgModule({
imports: [ BrowserModule, NgLoggerModule.forRoot(Level.LOG) ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
```
### 3 - Loading
#### Using SystemJS configuration
```JavaScript
System.config({
map: {
'@nsalaun/ng-logger': 'node_modules/@nsalaun/ng-logger/bundles/nsalaun-ng-logger.umd.js'
}
});
```
#### Angular-CLI
No need to set up anything, just import it in your code.
#### Rollup or webpack
No need to set up anything, just import it in your code.
#### Plain JavaScript
Include the `umd` bundle in your `index.html`:
```html
```
and use global `nsalaun.ngLogger` namespace.
### AoT compilation
The library is compatible with _AoT compilation_.
Because of the new metadata version with Angular 5, the library is not compatible with previous Angular version.
## Usage
### Basic Usage
Inject the `Logger` service anywhere you need it and use it like it's `console` :
```typescript
@Component({})
export class MyComponent(){
constructor(private logger: Logger){
this.logger.log('Hello !', "It's working :)");
}
}
```
The service offer a sub-list of `window.console` capacities :
- Basics :
- **[log](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)(...args: any[]) -** Outputs a message to the Web Console.
- **[debug](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug)(...args: any[]) -** Outputs a debugging message to the Web Console.
- **[info](https://developer.mozilla.org/en-US/docs/Web/API/Console/info)(...args: any[]) -** Outputs an informational message to the Web Console.
- **[warn](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn)(...args: any[]) -** Outputs a warning message to the Web Console.
- **[error](https://developer.mozilla.org/en-US/docs/Web/API/Console/error)(...args: any[]) -** Outputs an error message to the Web Console.
- Groups :
- **[group](https://developer.mozilla.org/en-US/docs/Web/API/Console/group)(groupTitle: string) -** Creates a new inline group in the Web Console log.
- **[groupCollapsed](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupCollapsed)(groupTitle: string) -** Creates a new inline group in the Web Console log that is initially collapsed.
- **[groupEnd](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupEnd)() -** Exits the current inline group in the Web Console.
- Time :
- **[time](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)(timerName: string) -** Starts a timer you can use to track how long an operation takes. It works only with log `Level` equal or higher than `DEBUG`.
- **[timeEnd](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd)(timerName: string) -** Stops a timer that was previously started by calling `Logger.time()`. It works only with log `Level` equal or higher than `DEBUG`.
### Using different log level on developpment or production
To set a different log level depending on environment, you can proceed as follows:
```typescript
import { NgModule, isDevMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
import { AppComponent } from './app.component';
// Set different log level depending on environment.
const LOG_LEVEL = Level.LOG;
if (!isDevMode()) {
const LOG_LEVEL = Level.ERROR;
}
@NgModule({
imports : [ BrowserModule, NgLoggerModule.forRoot(LOG_LEVEL) ],
declarations: [ AppComponent ],
bootstrap : [ AppComponent ],
})
export class AppModule { }
```
*Please note this method is one among others. It may not suit your projects requirements/constraints*
## License
© 2017-2021 Noémi Salaün
[MIT](https://github.com/noemi-salaun/ng-logger/blob/master/LICENSE)