├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── projects ├── demo │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── code-snippet │ │ │ │ ├── code-snippet.component.css │ │ │ │ ├── code-snippet.component.html │ │ │ │ ├── code-snippet.component.spec.ts │ │ │ │ └── code-snippet.component.ts │ │ │ ├── example │ │ │ │ ├── example.component.css │ │ │ │ ├── example.component.html │ │ │ │ ├── example.component.spec.ts │ │ │ │ └── example.component.ts │ │ │ └── home │ │ │ │ ├── home.component.css │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.spec.ts │ │ │ │ └── home.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.png │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json └── ngx-fancy-logger │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── ngx-fancy-logger.module.ts │ │ ├── ngx-fancy-logger.service.spec.ts │ │ └── ngx-fancy-logger.service.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── tslint.json ├── sample-images ├── debugOperator.png └── logLevels_header.png ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ngx-fancy-logger 2 | 3 | ngx-fancy-logger is a console logger for angular applications. It provides various features like different log levels, display labels, show time etc. 4 | 5 | # [Read Detailed Documentation](./projects/ngx-fancy-logger/README.md) | [NgxFancyLogger HomePage / Demo](https://ngx-fancy-logger.netlify.app/) 6 | 7 | ## Key Features 8 | 9 | - Different Log Levels (DEBUG=0, INFO=1, WARNING=2, ERROR=3). 10 | - Log Levels are displayed in Label form with assigned color style or default colors. 11 | - Show/Hide Time 12 | - Show/Hide Emoji for each Log Level 13 | - Show Header on console (`color` and `fontSize` configurable) 14 | - Debug RxJS Observable Stream using `debugOperator()` operator function 15 | - Can configure each setting with `LoggerConfig` in `forRoot` (which allows us to configure `environment` specific configuration) or using `updateConfig()` method. 16 | - Reset configuration using `resetConfig()` method 17 | - Environment Specific Log Level Restriction. 18 | eg. if you set `logLevel` to `WARNING`, it will only show logs for `WARNING` and `ERROR`. 19 | - Can configure Log Level Colors. 20 | - Can Disable all logs 21 | 22 | ## Sample Usage Screenshots 23 | 24 | ### Header and Different Log Level Sample Logs 25 | 26 | ![Header and Different Log Levels Sample Logs](./sample-images/logLevels_header.png "Header and Different Log Levels Sample Logs") 27 | 28 | ### Debug RxJS Observable Stream using `debugOperator()` operator function 29 | ![Debug RxJS Observable Stream using debugOperator() operator function ](./sample-images/debugOperator.png "Debug RxJS Observable Stream using debugOperator() operator function") 30 | 31 | 32 | ## Demo 33 | [Ngx-Fancy-Logger Demo with All available configuration options](https://ngx-fancy-logger.netlify.app/#/demo) 34 | 35 | ## Contribute 36 | All are welcome to contribute to `NgxFancyLogger`. Contribute with some code, file a bug or improve the documentation. 37 | 38 | ## Contributors ✨✨✨ 39 | 40 | Thanks goes to these wonderful people. 41 | 42 | 43 | 44 | 45 | 46 | 47 | 54 | 61 | 62 |
48 | 49 | 50 |
51 | Ankit Prajapati 52 | 53 | 		55 | 56 | 57 |
58 | Jiten (Jits) Bhagat 59 | 60 |
63 | 64 | 65 | 66 | 67 | 68 | ## Mark a Star ⭐ 69 | If you like this library, **mark a star** ⭐ on [ngx-fancy-logger GitHub](https://github.com/ngdevelop-tech/ngx-fancy-logger) repository, this will increase our confidence to add new features in this library. -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-fancy-logger": { 7 | "projectType": "library", 8 | "root": "projects/ngx-fancy-logger", 9 | "sourceRoot": "projects/ngx-fancy-logger/src", 10 | "prefix": "ngx", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-ng-packagr:build", 14 | "options": { 15 | "tsConfig": "projects/ngx-fancy-logger/tsconfig.lib.json", 16 | "project": "projects/ngx-fancy-logger/ng-package.json" 17 | }, 18 | "configurations": { 19 | "production": { 20 | "tsConfig": "projects/ngx-fancy-logger/tsconfig.lib.prod.json" 21 | } 22 | } 23 | }, 24 | "test": { 25 | "builder": "@angular-devkit/build-angular:karma", 26 | "options": { 27 | "main": "projects/ngx-fancy-logger/src/test.ts", 28 | "tsConfig": "projects/ngx-fancy-logger/tsconfig.spec.json", 29 | "karmaConfig": "projects/ngx-fancy-logger/karma.conf.js" 30 | } 31 | }, 32 | "lint": { 33 | "builder": "@angular-devkit/build-angular:tslint", 34 | "options": { 35 | "tsConfig": [ 36 | "projects/ngx-fancy-logger/tsconfig.lib.json", 37 | "projects/ngx-fancy-logger/tsconfig.spec.json" 38 | ], 39 | "exclude": [ 40 | "**/node_modules/**" 41 | ] 42 | } 43 | } 44 | } 45 | }, 46 | "demo": { 47 | "projectType": "application", 48 | "schematics": {}, 49 | "root": "projects/demo", 50 | "sourceRoot": "projects/demo/src", 51 | "prefix": "app", 52 | "architect": { 53 | "build": { 54 | "builder": "@angular-devkit/build-angular:browser", 55 | "options": { 56 | "outputPath": "dist/demo", 57 | "index": "projects/demo/src/index.html", 58 | "main": "projects/demo/src/main.ts", 59 | "polyfills": "projects/demo/src/polyfills.ts", 60 | "tsConfig": "projects/demo/tsconfig.app.json", 61 | "aot": true, 62 | "assets": [ 63 | "projects/demo/src/favicon.png", 64 | "projects/demo/src/assets" 65 | ], 66 | "styles": [ 67 | "projects/demo/src/styles.css" 68 | ], 69 | "scripts": [] 70 | }, 71 | "configurations": { 72 | "production": { 73 | "fileReplacements": [ 74 | { 75 | "replace": "projects/demo/src/environments/environment.ts", 76 | "with": "projects/demo/src/environments/environment.prod.ts" 77 | } 78 | ], 79 | "optimization": true, 80 | "outputHashing": "all", 81 | "sourceMap": false, 82 | "extractCss": true, 83 | "namedChunks": false, 84 | "extractLicenses": true, 85 | "vendorChunk": false, 86 | "buildOptimizer": true, 87 | "budgets": [ 88 | { 89 | "type": "initial", 90 | "maximumWarning": "2mb", 91 | "maximumError": "5mb" 92 | }, 93 | { 94 | "type": "anyComponentStyle", 95 | "maximumWarning": "6kb", 96 | "maximumError": "10kb" 97 | } 98 | ] 99 | } 100 | } 101 | }, 102 | "serve": { 103 | "builder": "@angular-devkit/build-angular:dev-server", 104 | "options": { 105 | "browserTarget": "demo:build" 106 | }, 107 | "configurations": { 108 | "production": { 109 | "browserTarget": "demo:build:production" 110 | } 111 | } 112 | }, 113 | "extract-i18n": { 114 | "builder": "@angular-devkit/build-angular:extract-i18n", 115 | "options": { 116 | "browserTarget": "demo:build" 117 | } 118 | }, 119 | "test": { 120 | "builder": "@angular-devkit/build-angular:karma", 121 | "options": { 122 | "main": "projects/demo/src/test.ts", 123 | "polyfills": "projects/demo/src/polyfills.ts", 124 | "tsConfig": "projects/demo/tsconfig.spec.json", 125 | "karmaConfig": "projects/demo/karma.conf.js", 126 | "assets": [ 127 | "projects/demo/src/favicon.ico", 128 | "projects/demo/src/assets" 129 | ], 130 | "styles": [ 131 | "projects/demo/src/styles.css" 132 | ], 133 | "scripts": [] 134 | } 135 | }, 136 | "lint": { 137 | "builder": "@angular-devkit/build-angular:tslint", 138 | "options": { 139 | "tsConfig": [ 140 | "projects/demo/tsconfig.app.json", 141 | "projects/demo/tsconfig.spec.json", 142 | "projects/demo/e2e/tsconfig.json" 143 | ], 144 | "exclude": [ 145 | "**/node_modules/**" 146 | ] 147 | } 148 | }, 149 | "e2e": { 150 | "builder": "@angular-devkit/build-angular:protractor", 151 | "options": { 152 | "protractorConfig": "projects/demo/e2e/protractor.conf.js", 153 | "devServerTarget": "demo:serve" 154 | }, 155 | "configurations": { 156 | "production": { 157 | "devServerTarget": "demo:serve:production" 158 | } 159 | } 160 | } 161 | } 162 | }}, 163 | "defaultProject": "demo" 164 | } 165 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-fancy-logger-repo", 3 | "version": "1.0.2", 4 | "description": "Console Logger for Angular applications", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve demo", 8 | "start:watch": "ng serve demo -- --watch", 9 | "build": "ng build", 10 | "test": "ng test", 11 | "lint": "ng lint", 12 | "e2e": "ng e2e", 13 | "ngx-fancy-logger:build": "ng build ngx-fancy-logger", 14 | "ngx-fancy-logger:build:prod": "ng build ngx-fancy-logger --prod", 15 | "ngx-fancy-logger:watch": "npm run ngx-fancy-logger:build -- --watch", 16 | "ngx-fancy-logger:publish": "npm run ngx-fancy-logger:build:prod && cd dist/ngx-fancy-logger && npm publish" 17 | }, 18 | "private": false, 19 | "dependencies": { 20 | "@angular/animations": "~9.0.6", 21 | "@angular/common": "~9.0.6", 22 | "@angular/compiler": "~9.0.6", 23 | "@angular/core": "~9.0.6", 24 | "@angular/forms": "~9.0.6", 25 | "@angular/platform-browser": "~9.0.6", 26 | "@angular/platform-browser-dynamic": "~9.0.6", 27 | "@angular/router": "~9.0.6", 28 | "ngx-fancy-logger": "^1.0.0", 29 | "rxjs": "~6.5.4", 30 | "tslib": "^1.10.0", 31 | "zone.js": "~0.10.2" 32 | }, 33 | "devDependencies": { 34 | "@angular-devkit/build-angular": "~0.900.7", 35 | "@angular-devkit/build-ng-packagr": "~0.900.7", 36 | "@angular/cli": "~9.0.6", 37 | "@angular/compiler-cli": "~9.0.6", 38 | "@angular/language-service": "~9.0.6", 39 | "@types/node": "^12.11.1", 40 | "@types/jasmine": "~3.5.0", 41 | "@types/jasminewd2": "~2.0.3", 42 | "codelyzer": "^5.1.2", 43 | "jasmine-core": "~3.5.0", 44 | "jasmine-spec-reporter": "~4.2.1", 45 | "karma": "~4.3.0", 46 | "karma-chrome-launcher": "~3.1.0", 47 | "karma-coverage-istanbul-reporter": "~2.1.0", 48 | "karma-jasmine": "~2.0.1", 49 | "karma-jasmine-html-reporter": "^1.4.2", 50 | "ng-packagr": "^9.0.0", 51 | "protractor": "~5.4.3", 52 | "ts-node": "~8.3.0", 53 | "tslint": "~5.18.0", 54 | "typescript": "~3.7.5" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /projects/demo/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /projects/demo/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /projects/demo/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('demo app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /projects/demo/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/demo/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/demo'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | position: sticky; 3 | top: 0; 4 | z-index: 1; 5 | } 6 | 7 | .navbar .fa{ 8 | color:white; 9 | } 10 | 11 | .nav-item{ 12 | cursor: pointer; 13 | } 14 | 15 | .icon i{ 16 | color: rgba(255,255,255,.5); 17 | padding: 0px 5px; 18 | } 19 | 20 | .icon i:hover{ 21 | color:rgba(255,255,255,.8); 22 | padding: 0px 5px; 23 | } 24 | 25 | footer { 26 | position: fixed; 27 | height: 40px; 28 | bottom: 0; 29 | width: 100%; 30 | } 31 | 32 | .container-fluid{ 33 | margin-bottom: 45px; 34 | } 35 | 36 | @media (max-width: 576px) { 37 | footer{ 38 | height: 60px; 39 | } 40 | .container-fluid{ 41 | margin-bottom: 65px; 42 | } 43 | } -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 25 |
26 | 27 |
28 | 29 |
30 | Made with ❤️ by NgDevelop. 31 | If you like this library, mark ⭐ in GitHub repository. 32 |
-------------------------------------------------------------------------------- /projects/demo/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'demo'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('demo'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement; 29 | expect(compiled.querySelector('.content span').textContent).toContain('demo app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NgxFancyLoggerService, LogLevel } from 'ngx-fancy-logger'; 3 | import { Router, NavigationEnd } from '@angular/router'; 4 | import { filter } from 'rxjs/operators'; 5 | 6 | declare const gtag: Function; 7 | @Component({ 8 | selector: 'app-root', 9 | templateUrl: './app.component.html', 10 | styleUrls: ['./app.component.css'] 11 | }) 12 | export class AppComponent { 13 | 14 | EXTERNAL_URL = { 15 | git: 'https://github.com/ngdevelop-tech/ngx-fancy-logger', 16 | npm: 'https://www.npmjs.com/package/ngx-fancy-logger', 17 | ngdevelop: 'https://www.ngdevelop.tech/blog/', 18 | twitter: 'https://twitter.com/ankit26895' 19 | }; 20 | 21 | constructor(private logger: NgxFancyLoggerService, private router: Router) { 22 | logger.header('This is a Ngx Fancy Logger Demo', { color: 'red', fontSize: 30 }); 23 | 24 | this.router.events.pipe( 25 | filter(event => event instanceof NavigationEnd) 26 | ).subscribe((event: NavigationEnd) => { 27 | /** START : Code to Track Page View */ 28 | gtag('event', 'page_view', { 29 | page_path: event.urlAfterRedirects 30 | }) 31 | /** END */ 32 | }) 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { NgxFancyLoggerModule, LogLevel } from 'ngx-fancy-logger'; 6 | import { ExampleComponent } from './example/example.component'; 7 | import { FormsModule } from '@angular/forms'; 8 | import { HomeComponent } from './home/home.component'; 9 | import { Routes, RouterModule } from '@angular/router'; 10 | import { CodeSnippetComponent } from './code-snippet/code-snippet.component'; 11 | 12 | const routes: Routes = [ 13 | {path: '', redirectTo: 'home', pathMatch: 'full'}, 14 | {path: 'home', component: HomeComponent}, 15 | {path: 'demo', component: ExampleComponent}, 16 | {path: '**', redirectTo : 'home'}, 17 | ]; 18 | 19 | @NgModule({ 20 | declarations: [ 21 | AppComponent, 22 | ExampleComponent, 23 | HomeComponent, 24 | CodeSnippetComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | FormsModule, 29 | RouterModule.forRoot(routes, {useHash: true}), 30 | NgxFancyLoggerModule, 31 | ], 32 | bootstrap: [AppComponent] 33 | }) 34 | export class AppModule { } 35 | -------------------------------------------------------------------------------- /projects/demo/src/app/code-snippet/code-snippet.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/90062eda0347d65b4ca392d9463abbb43e12fbc6/projects/demo/src/app/code-snippet/code-snippet.component.css -------------------------------------------------------------------------------- /projects/demo/src/app/code-snippet/code-snippet.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /projects/demo/src/app/code-snippet/code-snippet.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CodeSnippetComponent } from './code-snippet.component'; 4 | 5 | describe('CodeSnippetComponent', () => { 6 | let component: CodeSnippetComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CodeSnippetComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CodeSnippetComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/demo/src/app/code-snippet/code-snippet.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-code-snippet', 5 | templateUrl: './code-snippet.component.html', 6 | styleUrls: ['./code-snippet.component.css'] 7 | }) 8 | export class CodeSnippetComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/example/example.component.css: -------------------------------------------------------------------------------- 1 | .configChecks{ 2 | display: grid; 3 | grid-template-columns: 50% 50%; 4 | } 5 | 6 | .levelColor th, .levelColor td { 7 | padding: 2px !important; 8 | } 9 | 10 | .levelColor td input, .levelColor td input{ 11 | height: 25px; 12 | } 13 | 14 | .row{ 15 | margin-bottom: 5px; 16 | } 17 | .btn{ 18 | border-radius: 0px; 19 | } 20 | 21 | .card{ 22 | border-radius: 0px; 23 | margin: 5px; 24 | } 25 | 26 | .form-control{ 27 | border-radius: 0px; 28 | } 29 | 30 | .logLevelSelect{ 31 | height: 25px; 32 | padding-top :0px; 33 | padding-bottom :0px; 34 | } 35 | 36 | .alert{ 37 | border-radius: 0; 38 | } -------------------------------------------------------------------------------- /projects/demo/src/app/example/example.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |
11 |
12 |
13 |
14 |
15 |

Configuration

16 |
17 |
18 | 22 |
23 | 24 |
25 | 29 |
30 | 31 |
32 | 36 |
37 | 38 | 39 |
40 | 44 |
45 | 46 |
47 |
48 | 49 | 50 | 51 | 56 | 57 |
Log Level 52 | 55 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
Level Color
{{l}}
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
Level Emoji
{{l}}
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 |
94 |

Header Style Log

95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 |
103 | 104 | 105 |
106 |
107 | 108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |

Log Statement

116 |
117 |
118 |
119 | 121 |
122 |
123 |
124 |
125 |
126 | 130 |
131 |
132 | 133 |
134 | 135 | 136 | 137 | 138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |

Note :

146 |
    147 |
  • Level & Header color string can be any standard color specified in W3 Colors. or hex code.
    • 148 |
  • Level emoji can be any standard emoji specified in Unicode.org Emoji List.
    • 149 |
150 |
151 |
152 | 153 |
154 |
-------------------------------------------------------------------------------- /projects/demo/src/app/example/example.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExampleComponent } from './example.component'; 4 | 5 | describe('ExampleComponent', () => { 6 | let component: ExampleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ExampleComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ExampleComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/demo/src/app/example/example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { LogLevel, NgxFancyLoggerService, LoggerConfig } from 'ngx-fancy-logger'; 3 | @Component({ 4 | selector: 'app-example', 5 | templateUrl: './example.component.html', 6 | styleUrls: ['./example.component.css'] 7 | }) 8 | export class ExampleComponent implements OnInit { 9 | 10 | config: LoggerConfig = { 11 | showTime: true, 12 | logLevel: LogLevel.INFO, 13 | showEmoji: true, 14 | showLabel: true, 15 | disableLogs: false, 16 | levelColor: { 17 | [LogLevel.DEBUG]: 'black', 18 | [LogLevel.INFO]: 'steelblue', 19 | [LogLevel.WARNING]: 'orange', 20 | [LogLevel.ERROR]: 'red' 21 | }, 22 | levelEmoji: { 23 | [LogLevel.DEBUG]: '👨‍💻', 24 | [LogLevel.INFO]: '🐬', 25 | [LogLevel.WARNING]: '⚡', 26 | [LogLevel.ERROR]: '😨' 27 | } 28 | }; 29 | 30 | levels = Object.keys(LogLevel).filter(l => isNaN(Number(l))); 31 | logLevels = Object.keys(LogLevel).filter(l => !isNaN(Number(l))); 32 | logLevelEnum = LogLevel; 33 | 34 | constructor(private logger: NgxFancyLoggerService) { 35 | logger.header('Example Component'); 36 | } 37 | 38 | ngOnInit(): void { 39 | } 40 | 41 | updateConfig() { 42 | this.logger.updateConfig(this.config); 43 | this.logger.info('Config Updated...'); 44 | } 45 | 46 | showHeader(value: any) { 47 | this.logger.header(value.message, { color: value.color, fontSize: value.fontSize }); 48 | } 49 | 50 | showLog(logLevel: LogLevel, value: any) { 51 | try { 52 | const data = value.isJSON ? JSON.parse(value.data) : value.data; 53 | 54 | switch (logLevel) { 55 | case LogLevel.DEBUG: this.logger.debug(data); break; 56 | case LogLevel.INFO: this.logger.info(data); break; 57 | case LogLevel.WARNING: this.logger.warning(data); break; 58 | case LogLevel.ERROR: this.logger.error(data); break; 59 | } 60 | } catch (error) { 61 | if (error instanceof SyntaxError) { 62 | this.logger.error('Invalid JSON Object.'); 63 | } 64 | } 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /projects/demo/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | .badges img{ 2 | margin: 0 5px; 3 | } 4 | 5 | .row{ 6 | margin: 10px 0; 7 | } 8 | 9 | @media (max-width: 576px) { 10 | .title{ 11 | margin-top: 10px; 12 | font-size: 2rem; 13 | } 14 | } -------------------------------------------------------------------------------- /projects/demo/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

NGX-FANCY-LOGGER

3 |

Console Logger for Angular(v6 and above)

4 |

Make debugging easier with more readable and 5 | configurable fancy logs

6 |
7 | npm 8 | npm 9 | GitHub stars 10 | npm bundle size 11 | NPM 12 |
13 | 14 |
15 | DOCUMENTATION 17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |

Key Features

26 |
27 |
28 |
    29 |
  • 30 | Log Levels Labels 31 | DEBUG 32 | INFO 33 | WARNING 34 | ERROR 35 |
    • 36 |
  • Show/Hide Log Time
    • 37 |
  • Show/Hide Labels
    • 38 |
  • Show/Hide Emoji👩🏻‍💻 for each log level
    • 39 |
  • Log Level colors and emojis are configurable
    • 40 |
41 |
42 |
43 |
    44 |
  • 45 | Show Header on console (color and fontSize configurable) 46 |
    • 47 |
  • Debug RxJS Observable Stream using debugOperator() operator function 48 |
    • 49 |
  • Can configure each setting. 50 |
    • 51 |
  • Environment Specific Log Level Restriction. 52 | eg. if you set logLevel to LogLevel.WARNING, it will only show logs for WARNING and ERROR
    • 53 |
  • Can Disable all Logs
    • 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 |

Sample Log Screenshot

65 | 78 |
79 |
80 |

Installation

81 |
82 |
83 | 84 |
85 |
86 |
87 |

Install ngx-fancy-logger

88 |
89 | npm install --save ngx-fancy-logger 90 |

Once it is installed, import NgxFancyLoggerModule it in 91 | AppModule.

92 | 93 |
94 |
95 |

NgxFancyLogger with Default Configuration

96 |
97 |

98 | To use NgxFancyLoggerModule with Default configuration you just need to 99 | import it in @NgModule. 100 | No need to call .forRoot() method 101 |

102 | 103 | 
104 | import {{'{'}} NgxFancyLoggerModule } from 'ngx-fancy-logger';
105 | 
106 | @NgModule({{'{'}}
107 | ...
108 | imports: [
109 |     ...
110 |     NgxFancyLoggerModule
111 | ]
112 | ...
113 | })
114 | export class AppModule {{'{'}} }
115 |
116 | 117 |
118 |
119 |

Override NgxFancyLogger Default Configuration

120 |
121 |

122 | You can override NgxFancyLoggerModule default configuration with 123 | forRoot method, as below. Each configuration is optional. 124 |

125 | 126 | 127 | 
128 | import {{'{'}} NgxFancyLoggerModule, LogLevel } from 'ngx-fancy-logger';
129 | 
130 | @NgModule({{'{'}}
131 |     ...
132 |     imports: [
133 |     ...
134 |     NgxFancyLoggerModule.forRoot({{'{'}}
135 |         showTime: false,
136 |         logLevel: LogLevel.WARNING,
137 |         levelColor: {{'{'}}
138 |             [LogLevel.ERROR]: 'brown'
139 |         }
140 |     })
141 |     ]
142 |     ...
143 | })
144 | export class AppModule {{'{'}} }
145 |
146 | 147 | 148 |
149 |
150 |

Using NgxFancyLoggerService in Component/Service

151 |
152 |

153 | Once installation is done you can use it in any component or service by injecting 154 | NgxFancyLoggerService. 155 |

156 | 157 | 158 | 
159 | export class AppComponent {{'{'}}
160 | title = 'demo';
161 | 
162 | constructor(private logger: NgxFancyLoggerService) {{'{'}}
163 |     logger.header('This is a Ngx Fancy Logger Demo', {{'{'}} color: 'red', fontSize: 30 });
164 |     logger.debug('This is a DEBUG Log', {{'{'}} a: 20, b: 30 });
165 |     logger.info('This is a INFO log', 123, {{'{'}} a: 20, b: 30 });
166 |     logger.warning('This is a WARNING Log', {{'{'}} a: 20, b: 30 });
167 |     logger.error('This is an ERROR Log', {{'{'}} a: 20, b: 30 });
168 | 
169 |     logger.header('Observable Log Message using debugOperator() ');
170 |     const source$ = of(Math.random(), {{'{'}} test: 'data' }, 123, 'This  is source observable data');
171 |     source$.pipe(
172 |     logger.debugOperator('Source Response : ', LogLevel.INFO),
173 |     map(data => ({{'{'}} key: Math.random(), response: data}) ),
174 |     logger.debugOperator('Mapped Response : ')
175 |     ).subscribe();
176 | }
177 |       
178 |
179 | 180 | 181 |
182 | 183 |
184 |
185 | 186 |
187 |
188 |
189 |
-------------------------------------------------------------------------------- /projects/demo/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/demo/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/demo/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/90062eda0347d65b4ca392d9463abbb43e12fbc6/projects/demo/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/demo/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/demo/src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/90062eda0347d65b4ca392d9463abbb43e12fbc6/projects/demo/src/favicon.png -------------------------------------------------------------------------------- /projects/demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ngx-Fancy-Logger 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 27 | 28 | 29 | 30 | 31 |
32 |

NGX-FANCY-LOGGER

33 |
34 |
35 | 36 | 37 | 38 | 39 |
40 | Loading 41 |
42 | 43 | 44 |
45 | Made with 46 | ❤️ by 47 | NgDevelop 48 |
49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /projects/demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /projects/demo/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /projects/demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | .code-block{ 3 | background-color: #031531; 4 | padding: 5px; 5 | border-radius: 5px; 6 | } 7 | code{ 8 | background-color: #031531; 9 | padding: 2px 5px; 10 | border-radius: 5px; 11 | } 12 | 13 | .code-block pre, code{ 14 | color: white; 15 | } 16 | 17 | *::-webkit-scrollbar-track 18 | { 19 | background-color: #F5F5F5; 20 | } 21 | 22 | *::-webkit-scrollbar 23 | { 24 | width: 6px; 25 | height: 6px; 26 | } 27 | 28 | *::-webkit-scrollbar-thumb 29 | { 30 | background-color: #777; 31 | } 32 | 33 | .bg-primary{ 34 | background-color: #093f7a!important 35 | } 36 | 37 | 38 | /** Loader Styles **/ 39 | 40 | .loader .cube-folding { 41 | width: 50px; 42 | height: 50px; 43 | display: inline-block; 44 | -moz-transform: rotate(45deg); 45 | -ms-transform: rotate(45deg); 46 | -webkit-transform: rotate(45deg); 47 | transform: rotate(45deg); 48 | font-size: 0; 49 | } 50 | .loader .cube-folding span { 51 | position: relative; 52 | width: 25px; 53 | height: 25px; 54 | -moz-transform: scale(1.1); 55 | -ms-transform: scale(1.1); 56 | -webkit-transform: scale(1.1); 57 | transform: scale(1.1); 58 | display: inline-block; 59 | } 60 | 61 | .loader .cube-folding span::before { 62 | content: ''; 63 | background-color: #A8C5FF; 64 | position: absolute; 65 | left: 0; 66 | top: 0; 67 | display: block; 68 | width: 25px; 69 | height: 25px; 70 | -moz-transform-origin: 100% 100%; 71 | -ms-transform-origin: 100% 100%; 72 | -webkit-transform-origin: 100% 100%; 73 | transform-origin: 100% 100%; 74 | -moz-animation: folding 2.5s infinite linear both; 75 | -webkit-animation: folding 2.5s infinite linear both; 76 | animation: folding 2.5s infinite linear both; 77 | } 78 | .loader .cube-folding .leaf2 { 79 | -moz-transform: rotateZ(90deg) scale(1.1); 80 | -ms-transform: rotateZ(90deg) scale(1.1); 81 | -webkit-transform: rotateZ(90deg) scale(1.1); 82 | transform: rotateZ(90deg) scale(1.1); 83 | } 84 | .loader .cube-folding .leaf2::before { 85 | -moz-animation-delay: 0.3s; 86 | -webkit-animation-delay: 0.3s; 87 | animation-delay: 0.3s; 88 | background-color: #8197C2; 89 | } 90 | .loader .cube-folding .leaf3 { 91 | -moz-transform: rotateZ(270deg) scale(1.1); 92 | -ms-transform: rotateZ(270deg) scale(1.1); 93 | -webkit-transform: rotateZ(270deg) scale(1.1); 94 | transform: rotateZ(270deg) scale(1.1); 95 | } 96 | .loader .cube-folding .leaf3::before { 97 | -moz-animation-delay: 0.9s; 98 | -webkit-animation-delay: 0.9s; 99 | animation-delay: 0.9s; 100 | background-color: #8197C2; 101 | } 102 | .loader .cube-folding .leaf4 { 103 | -moz-transform: rotateZ(180deg) scale(1.1); 104 | -ms-transform: rotateZ(180deg) scale(1.1); 105 | -webkit-transform: rotateZ(180deg) scale(1.1); 106 | transform: rotateZ(180deg) scale(1.1); 107 | } 108 | .loader .cube-folding .leaf4::before { 109 | -moz-animation-delay: 0.6s; 110 | -webkit-animation-delay: 0.6s; 111 | animation-delay: 0.6s; 112 | background-color: #546380; 113 | } 114 | 115 | @-moz-keyframes folding { 116 | 0%, 10% { 117 | -moz-transform: perspective(140px) rotateX(-180deg); 118 | transform: perspective(140px) rotateX(-180deg); 119 | opacity: 0; 120 | } 121 | 25%, 75% { 122 | -moz-transform: perspective(140px) rotateX(0deg); 123 | transform: perspective(140px) rotateX(0deg); 124 | opacity: 1; 125 | } 126 | 90%, 100% { 127 | -moz-transform: perspective(140px) rotateY(180deg); 128 | transform: perspective(140px) rotateY(180deg); 129 | opacity: 0; 130 | } 131 | } 132 | @-webkit-keyframes folding { 133 | 0%, 10% { 134 | -webkit-transform: perspective(140px) rotateX(-180deg); 135 | transform: perspective(140px) rotateX(-180deg); 136 | opacity: 0; 137 | } 138 | 25%, 75% { 139 | -webkit-transform: perspective(140px) rotateX(0deg); 140 | transform: perspective(140px) rotateX(0deg); 141 | opacity: 1; 142 | } 143 | 90%, 100% { 144 | -webkit-transform: perspective(140px) rotateY(180deg); 145 | transform: perspective(140px) rotateY(180deg); 146 | opacity: 0; 147 | } 148 | } 149 | @keyframes folding { 150 | 0%, 10% { 151 | -moz-transform: perspective(140px) rotateX(-180deg); 152 | -ms-transform: perspective(140px) rotateX(-180deg); 153 | -webkit-transform: perspective(140px) rotateX(-180deg); 154 | transform: perspective(140px) rotateX(-180deg); 155 | opacity: 0; 156 | } 157 | 25%, 75% { 158 | -moz-transform: perspective(140px) rotateX(0deg); 159 | -ms-transform: perspective(140px) rotateX(0deg); 160 | -webkit-transform: perspective(140px) rotateX(0deg); 161 | transform: perspective(140px) rotateX(0deg); 162 | opacity: 1; 163 | } 164 | 90%, 100% { 165 | -moz-transform: perspective(140px) rotateY(180deg); 166 | -ms-transform: perspective(140px) rotateY(180deg); 167 | -webkit-transform: perspective(140px) rotateY(180deg); 168 | transform: perspective(140px) rotateY(180deg); 169 | opacity: 0; 170 | } 171 | } 172 | .loader .cube-wrapper { 173 | position: fixed; 174 | left: 50%; 175 | top: 50%; 176 | margin-top: -50px; 177 | margin-left: -50px; 178 | width: 100px; 179 | height: 100px; 180 | text-align: center; 181 | } 182 | .loader .cube-wrapper:after { 183 | content: ''; 184 | position: absolute; 185 | left: 0; 186 | right: 0; 187 | bottom: -20px; 188 | margin: auto; 189 | width: 90px; 190 | height: 6px; 191 | background-color: rgba(0, 0, 0, 0.1); 192 | -webkit-filter: blur(2px); 193 | filter: blur(2px); 194 | -moz-border-radius: 100%; 195 | -webkit-border-radius: 100%; 196 | border-radius: 100%; 197 | z-index: 1; 198 | -moz-animation: shadow 0.5s ease infinite alternate; 199 | -webkit-animation: shadow 0.5s ease infinite alternate; 200 | animation: shadow 0.5s ease infinite alternate; 201 | } 202 | .loader .cube-wrapper .loading { 203 | font-size: 12px; 204 | letter-spacing: 0.1em; 205 | display: block; 206 | color: #A8C5FF; 207 | position: relative; 208 | top: 25px; 209 | z-index: 2; 210 | -moz-animation: text 0.5s ease infinite alternate; 211 | -webkit-animation: text 0.5s ease infinite alternate; 212 | animation: text 0.5s ease infinite alternate; 213 | } 214 | 215 | @-moz-keyframes text { 216 | 100% { 217 | top: 35px; 218 | } 219 | } 220 | @-webkit-keyframes text { 221 | 100% { 222 | top: 35px; 223 | } 224 | } 225 | @keyframes text { 226 | 100% { 227 | top: 35px; 228 | } 229 | } 230 | @-moz-keyframes shadow { 231 | 100% { 232 | bottom: -18px; 233 | width: 100px; 234 | } 235 | } 236 | @-webkit-keyframes shadow { 237 | 100% { 238 | bottom: -18px; 239 | width: 100px; 240 | } 241 | } 242 | @keyframes shadow { 243 | 100% { 244 | bottom: -18px; 245 | width: 100px; 246 | } 247 | } 248 | html, body { 249 | min-height: 100%; 250 | } 251 | 252 | 253 | .loader h1 { 254 | font-size: 26px; 255 | display: block; 256 | text-align: center; 257 | color: #2A3140; 258 | padding: 50px 20px; 259 | font-weight: 300; 260 | font-family: 'Archivo Narrow', sans-serif; 261 | } 262 | 263 | .loader .made-with-love { 264 | position: fixed; 265 | left: 0; 266 | width: 100%; 267 | bottom: 10px; 268 | text-align: center; 269 | font-size: 10px; 270 | z-index: 9999; 271 | font-family: arial; 272 | color: #9BB5EB; 273 | } 274 | .loader .made-with-love i { 275 | font-style: normal; 276 | color: #F50057; 277 | font-size: 14px; 278 | position: relative; 279 | top: 2px; 280 | } 281 | .loader .made-with-love a { 282 | color: #9BB5EB; 283 | text-decoration: none; 284 | } 285 | .loader .made-with-love a:hover { 286 | text-decoration: underline; 287 | } -------------------------------------------------------------------------------- /projects/demo/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/demo/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/README.md: -------------------------------------------------------------------------------- 1 | # NgxFancyLogger Documentation 2 | 3 | NGX-FANCY-LOGGER is a console logger for angular applications. It provides various features like log level labels, log level emoji, time and so on etc. 4 | 5 | It supports Angular v6 and above. 6 | 7 | # [NgxFancyLogger HomePage](https://ngx-fancy-logger.netlify.app/) | [NgxFancyLogger Demo](https://ngx-fancy-logger.netlify.app/#/demo) 8 | 9 | 10 | ## Key Features 11 | 12 | - Different Log Levels (DEBUG=0, INFO=1, WARNING=2, ERROR=3). 13 | - Log Levels are displayed in Label form with assigned color style or default colors. 14 | - Show/Hide Time 15 | - Show/Hide Emogi for each Log Level 16 | - Show Header on console (`color` and `fontSize` configurable) 17 | - Debug RxJS Observable Stream using `debugOperator()` operator function 18 | - Can configure each setting with `LoggerConfig` in `forRoot` (which allows us to configure `environment` specific configuration) or using `updateConfig()` method. 19 | - Reset configuration using `resetConfig()` method 20 | - Environment Specific Log Level Restriction. 21 | eg. if you set `logLevel` to `WARNING`, it will only show logs for `WARNING` and `ERROR`. 22 | - Can configure Log Level Colors and Emojis. 23 | - Can Disable all logs 24 | 25 | ## Installation 26 | 27 | `npm install --save ngx-fancy-logger` 28 | 29 | Once it is installed add it in `AppModule`. 30 | 31 | #### With Default Configuration 32 | 33 | To use `NgxFancyLoggerModule` with Default configuration you just need to import it in `@NgModule`. No need to call `.forRoot()` method 34 | ``` 35 | import { NgxFancyLoggerModule } from 'ngx-fancy-logger'; 36 | 37 | @NgModule({ 38 | ... 39 | imports: [ 40 | ... 41 | NgxFancyLoggerModule 42 | ] 43 | ... 44 | }) 45 | export class AppModule { } 46 | 47 | ``` 48 | #### Override Default Configuration 49 | You can override `NgxFancyLoggerModule` default configuration with `forRoot` method, as below. Each configuration is optional. 50 | > Overriding default configuration allows us to set environment specific configuration. 51 | > We can add `loggerConfig` in `environment.ts` (environment specific file) and use it as `NgxFancyLoggerModule.forRoot(environment.loggerConfig)` in Module 52 | 53 | ``` 54 | import { NgxFancyLoggerModule, LogLevel } from 'ngx-fancy-logger'; 55 | 56 | @NgModule({ 57 | ... 58 | imports: [ 59 | ... 60 | NgxFancyLoggerModule.forRoot({ 61 | showTime: false, 62 | logLevel: LogLevel.WARNING, 63 | levelColor: { 64 | [LogLevel.ERROR]: 'brown' 65 | } 66 | }) 67 | ] 68 | ... 69 | }) 70 | export class AppModule { } 71 | 72 | ``` 73 | 74 | ## Usage 75 | 76 | Once installation is done you can use it in any component or service by injecting `NgxFancyLoggerService`. 77 | 78 | ``` 79 | export class AppComponent { 80 | title = 'demo'; 81 | 82 | constructor(private logger: NgxFancyLoggerService) { 83 | logger.header('This is a Ngx Fancy Logger Demo', { color: 'red', fontSize: 30 }); 84 | logger.debug('This is a DEBUG Log', { a: 20, b: 30 }); 85 | logger.info('This is a INFO log', 123, { a: 20, b: 30 }); 86 | logger.warning('This is a WARNING Log', { a: 20, b: 30 }); 87 | logger.error('This is an ERROR Log', { a: 20, b: 30 }); 88 | 89 | logger.header('Observable Log Message using debugOperator() '); 90 | const source$ = of(Math.random(), { test: 'data' }, 123, 'This is source observable data'); 91 | source$.pipe( 92 | logger.debugOperator('Source Response : ', LogLevel.INFO), 93 | map(data => ({ key: Math.random(), response: data}) ), 94 | logger.debugOperator('Mapped Response : ') 95 | ).subscribe(); 96 | } 97 | } 98 | 99 | ``` 100 | 101 | ### Methods : 102 | Name | Description 103 | ----------------|------------- 104 | debug | Show the DEBUG logs, Priority in LogLevel = 0, `LogLevel.DEBUG` 105 | info | Show the INFO logs, Priority in LogLevel = 1, `LogLevel.INFO` 106 | warning | Show the WARNING logs, Priority in LogLevel = 2, `LogLevel.WARNING` 107 | error | Show the ERROR logs, Priority in LogLevel = 3, `LogLevel.ERROR` 108 | updateConfig | Override default configuration / configuration done with `forRoot()` 109 | resetConfig | Reset to default configuration 110 | debugOperator | It is an RxJS custom operator to debug Observable Streams. 111 | 112 | Each method supports any no. of parameters, the way you do in `console.log()`. 113 | 114 | 115 | ## Sample Usage Screenshots 116 | 117 | ### Header and Different Log Level Sample Logs 118 | 119 | ![Header and Different Log Level Sample Logs](https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/master/sample-images/logLevels_header.png "Header and Different Log Level Sample Logs") 120 | 121 | ### Debug RxJS Observable Stream using `debugOperator()` operator function 122 | ![Debug RxJS Observable Stream using debugOperator() operator function ](https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/master/sample-images/debugOperator.png "Debug RxJS Observable Stream using debugOperator() operator function") 123 | 124 | ## Configuration 125 | 126 | Configuration is of type `LoggerConfig`. as you can see in above example. You can do following configurations. 127 | 128 | Config Type | Default | Description 129 | ------------|------------------------------------|------------ 130 | showTime | `true` | Show/hide time in logs. 131 | showEmoji | `true` | Show/hide emoji in logs. 132 | showLabel | `true` | Show/hide log label (Usecase : can be removed when you want to only show emoji) 133 | disableLogs | `false` | if it is `true`, all logs are disabled, (Usecase : can be used in production to disable logs) 134 | logLevel | `LogLevel.DEBUG` | `logLevel` will allow you to show only logs of that level and above.(Usecase : can be used for environment specific log levels) 135 | levelColor | {
[LogLevel.INFO] : 'steelblue',
[LogLevel.DEBUG] : 'black',
[LogLevel.WARNING] : 'orange',
[LogLevel.ERROR]: 'red'
} | Override default log level color. here `color` string can be any standard color specified in [W3 Colors](https://www.w3.org/wiki/CSS/Properties/color/keywords). or hex code. 136 | levelEmoji | {
[LogLevel.INFO] : '🐬',
[LogLevel.DEBUG] : '👨‍💻',
[LogLevel.WARNING] : '⚡',
[LogLevel.ERROR]: '😨'
} | Override default emoji. here `emoji` string can be any standard emoji specified in [unicode.org emoji list](https://unicode.org/emoji/charts/full-emoji-list.html). 137 | 138 | # Dependencies 139 | 140 | `@angular/core >= 6.0.0`, `@angular/common >= 6.0.0`, `rxjs >= 6.0.0` 141 | 142 | ## Demo 143 | [Ngx-Fancy-Logger Demo with All available configuration options](https://ngx-fancy-logger.netlify.app/#/demo) 144 | 145 | ## Contribute 146 | All are welcome to contribute to `NgxFancyLogger`. Contribute with some code, file a bug or improve the documentation. 147 | 148 | ## Mark a Star ⭐ 149 | If you like this library, **mark a star** ⭐ on [ngx-fancy-logger GitHub](https://github.com/ngdevelop-tech/ngx-fancy-logger) repository, this will increase our confidence to add new features in this library. -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/ngx-fancy-logger'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-fancy-logger", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-fancy-logger", 3 | "version": "1.0.2", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/ngdevelop-tech/ngx-fancy-logger" 7 | }, 8 | "author": { 9 | "name": "Ankit Prajapati", 10 | "email": "aprajapati06@gmail.com" 11 | }, 12 | "license": "MIT", 13 | "bugs": { 14 | "url": "https://github.com/ngdevelop-tech/ngx-fancy-logger/issues" 15 | }, 16 | "homepage": "https://ngx-fancy-logger.netlify.app", 17 | "keywords": [ 18 | "angular", 19 | "logging", 20 | "logger" 21 | ], 22 | "peerDependencies": { 23 | "@angular/common": ">=6.0.0", 24 | "@angular/core": ">=6.0.0", 25 | "tslib": "^1.10.0", 26 | "rxjs": ">=6.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/src/lib/ngx-fancy-logger.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders } from '@angular/core'; 2 | import { LoggerConfig, LogLevel, NgxFancyLoggerService } from './ngx-fancy-logger.service'; 3 | 4 | 5 | @NgModule({ 6 | imports: [], 7 | providers: [NgxFancyLoggerService] 8 | }) 9 | export class NgxFancyLoggerModule { 10 | static forRoot(config: LoggerConfig | null | undefined): ModuleWithProviders { 11 | return { 12 | ngModule: NgxFancyLoggerModule, 13 | providers: [ 14 | { provide: LoggerConfig, useValue: config || {} }, 15 | NgxFancyLoggerService 16 | ] 17 | }; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/src/lib/ngx-fancy-logger.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxFancyLoggerService } from './ngx-fancy-logger.service'; 4 | 5 | describe('NgxFancyLoggerService', () => { 6 | let service: NgxFancyLoggerService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(NgxFancyLoggerService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/src/lib/ngx-fancy-logger.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Optional } from '@angular/core'; 2 | import { tap } from 'rxjs/operators'; 3 | import { MonoTypeOperatorFunction } from 'rxjs'; 4 | export enum LogLevel { 5 | DEBUG, 6 | INFO, 7 | WARNING, 8 | ERROR, 9 | } 10 | 11 | export abstract class AbstractNgxFancyLoggerService { 12 | abstract debug(...args: any[]): void; 13 | abstract info(...args: any[]): void; 14 | abstract warning(...args: any[]): void; 15 | abstract error(...args: any[]): void; 16 | } 17 | 18 | export class LoggerConfig { 19 | showTime ?= true; 20 | logLevel ?= LogLevel.DEBUG; 21 | showEmoji ?= true; 22 | showLabel ?= true; 23 | disableLogs ?= false; 24 | levelColor?: { 25 | [logLevel: number]: string, 26 | } = {}; 27 | levelEmoji?: { 28 | [logLevel: number]: string 29 | } = {}; 30 | } 31 | 32 | export interface HeaderConfig { 33 | color ?: string; 34 | fontSize ?: number; 35 | } 36 | 37 | const DEFAULT_LEVEL_COLORS = { 38 | [LogLevel.DEBUG]: 'black', 39 | [LogLevel.INFO]: 'steelblue', 40 | [LogLevel.WARNING]: 'orange', 41 | [LogLevel.ERROR]: 'red' 42 | }; 43 | 44 | const DEFAULT_EMOJIS = { 45 | [LogLevel.DEBUG]: '👨‍💻', 46 | [LogLevel.INFO]: '🐬', 47 | [LogLevel.WARNING]: '⚡', 48 | [LogLevel.ERROR]: '😨' 49 | }; 50 | 51 | @Injectable({ 52 | providedIn: 'root' 53 | }) 54 | export class NgxFancyLoggerService implements AbstractNgxFancyLoggerService { 55 | private DEFAULT_CONFIG = new LoggerConfig(); 56 | private config: LoggerConfig; 57 | 58 | private levelPrefix = {}; 59 | 60 | constructor(@Optional() private loggerConfig: LoggerConfig) { 61 | this.config = this.DEFAULT_CONFIG; 62 | this.updateConfig(loggerConfig); 63 | } 64 | 65 | private setPrefix() { 66 | if (this.config.disableLogs) { 67 | return; 68 | } 69 | for (const key in LogLevel) { 70 | if (!isNaN(Number(key))) { 71 | let prefix = this.config.showEmoji ? this.config.levelEmoji[key] || DEFAULT_EMOJIS[key] : ''; 72 | if (this.config.showLabel) { 73 | prefix += LogLevel[key]; 74 | } 75 | 76 | this.levelPrefix[key] = prefix; 77 | } 78 | } 79 | } 80 | 81 | private showTime = () => { 82 | return this.config.showTime ? ` > ${new Date().toLocaleString()}` : ''; 83 | } 84 | 85 | private getStyles = (level: LogLevel) => `color:white; 86 | background-color:${this.config.levelColor[level] || DEFAULT_LEVEL_COLORS[level]}; 87 | padding: 0px 2px; 88 | border-radius: 2px` 89 | 90 | /** Common Log Method */ 91 | private log(level: LogLevel, ...args: any[]) { 92 | let method = 'log'; 93 | switch (level) { 94 | case LogLevel.WARNING: method = 'warn'; break; 95 | case LogLevel.ERROR: method = 'error'; break; 96 | } 97 | 98 | if (this.config.disableLogs || (level < this.config.logLevel)) { 99 | return; 100 | } 101 | console[method](`%c${this.levelPrefix[level]}${this.showTime()}`, this.getStyles(level), ...args); 102 | } 103 | 104 | /** Update configuration, it will override configuration done through forRoot or Default Config */ 105 | updateConfig(loggerConfig: LoggerConfig | null | undefined) { 106 | this.config = { ...this.config, ...loggerConfig }; 107 | this.setPrefix(); 108 | } 109 | 110 | /** Reset to Default Configuration */ 111 | resetConfig() { 112 | this.config = this.DEFAULT_CONFIG; 113 | this.setPrefix(); 114 | } 115 | 116 | /** Display DEBUG level log */ 117 | debug(...args: any[]): void { 118 | this.log(LogLevel.DEBUG, ...args); 119 | } 120 | 121 | /** Display INFO level log */ 122 | info(...args: any[]): void { 123 | this.log(LogLevel.INFO, ...args); 124 | } 125 | 126 | /** Display WARNING Level log */ 127 | warning(...args: any[]): void { 128 | this.log(LogLevel.WARNING, ...args); 129 | } 130 | 131 | /** Display ERROR level log */ 132 | error(...args: any[]): void { 133 | this.log(LogLevel.ERROR, ...args); 134 | } 135 | 136 | /** Display Header on Console, You can configure color and fontSize of header */ 137 | header(title: string, config: HeaderConfig = {}) { 138 | const styles = `font-size: ${config.fontSize || 20}px; color:${config.color || 'steelblue'}; text-shadow: #ddd 2px 2px 2px`; 139 | console.log(`%c${title}`, styles); 140 | } 141 | 142 | /** RxJS Debug Operator to generate Log */ 143 | debugOperator = (message?: string, logLevel = LogLevel.DEBUG): MonoTypeOperatorFunction => tap(data => { 144 | this.log(logLevel, message || '', data); 145 | }) 146 | 147 | } 148 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-fancy-logger 3 | */ 4 | 5 | export * from './lib/ngx-fancy-logger.service'; 6 | export * from './lib/ngx-fancy-logger.module'; 7 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/zone-testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: { 12 | context(path: string, deep?: boolean, filter?: RegExp): { 13 | keys(): string[]; 14 | (id: string): T; 15 | }; 16 | }; 17 | 18 | // First, initialize the Angular testing environment. 19 | getTestBed().initTestEnvironment( 20 | BrowserDynamicTestingModule, 21 | platformBrowserDynamicTesting() 22 | ); 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "declaration": true, 7 | "inlineSources": true, 8 | "types": [], 9 | "lib": [ 10 | "dom", 11 | "es2018" 12 | ] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "enableResourceInlining": true 18 | }, 19 | "exclude": [ 20 | "src/test.ts", 21 | "**/*.spec.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "angularCompilerOptions": { 4 | "enableIvy": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-fancy-logger/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "ngx", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "ngx", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /sample-images/debugOperator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/90062eda0347d65b4ca392d9463abbb43e12fbc6/sample-images/debugOperator.png -------------------------------------------------------------------------------- /sample-images/logLevels_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngdevelop-tech/ngx-fancy-logger/90062eda0347d65b4ca392d9463abbb43e12fbc6/sample-images/logLevels_header.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ], 18 | "paths": { 19 | "ngx-fancy-logger": [ 20 | "dist/ngx-fancy-logger/ngx-fancy-logger", 21 | "dist/ngx-fancy-logger" 22 | ] 23 | } 24 | }, 25 | "angularCompilerOptions": { 26 | "fullTemplateTypeCheck": true, 27 | "strictInjectionParameters": true 28 | } 29 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "array-type": false, 8 | "arrow-parens": false, 9 | "deprecation": { 10 | "severity": "warning" 11 | }, 12 | "import-blacklist": [ 13 | true, 14 | "rxjs/Rx" 15 | ], 16 | "interface-name": false, 17 | "max-classes-per-file": false, 18 | "max-line-length": [ 19 | true, 20 | 140 21 | ], 22 | "member-access": false, 23 | "member-ordering": [ 24 | true, 25 | { 26 | "order": [ 27 | "static-field", 28 | "instance-field", 29 | "static-method", 30 | "instance-method" 31 | ] 32 | } 33 | ], 34 | "no-consecutive-blank-lines": false, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-empty": false, 44 | "no-inferrable-types": [ 45 | true, 46 | "ignore-params" 47 | ], 48 | "no-non-null-assertion": true, 49 | "no-redundant-jsdoc": true, 50 | "no-switch-case-fall-through": true, 51 | "no-var-requires": false, 52 | "object-literal-key-quotes": [ 53 | true, 54 | "as-needed" 55 | ], 56 | "object-literal-sort-keys": false, 57 | "ordered-imports": false, 58 | "quotemark": [ 59 | true, 60 | "single" 61 | ], 62 | "trailing-comma": false, 63 | "component-class-suffix": true, 64 | "contextual-lifecycle": true, 65 | "directive-class-suffix": true, 66 | "no-conflicting-lifecycle": true, 67 | "no-host-metadata-property": true, 68 | "no-input-rename": true, 69 | "no-inputs-metadata-property": true, 70 | "no-output-native": true, 71 | "no-output-on-prefix": true, 72 | "no-output-rename": true, 73 | "no-outputs-metadata-property": true, 74 | "template-banana-in-box": true, 75 | "template-no-negated-async": true, 76 | "use-lifecycle-interface": true, 77 | "use-pipe-transform-interface": true 78 | } 79 | } 80 | --------------------------------------------------------------------------------