How to configure logger level for ngx-logger in global config file

Question

I have recently included ngx-logger for my project for implementing a logger level within the application. I have hard-coded the logger level in app.module.ts within the configuration of ngx-logger but I need to implement this in some global config file.

I had followed a tutorial here, which told me to hard-code the level within the configuration. The problem with this approach is that apart from the configurations already stated,if there is any other environment defined other than what I have coded it would produce an error. I want to remove this hard-coded configuration and instead use some "config" file for managing the environment variables. But I am not sure how to do that and there are no online resources which I could find.

here is my configuration:

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    MDBBootstrapModule.forRoot(),
    AppAsideModule,
    AppBreadcrumbModule.forRoot(),
    AppFooterModule,
    AppHeaderModule,
    AppSidebarModule,
    PerfectScrollbarModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    //  Logger config based on environment
    LoggerModule.forRoot({
      level: !environment.production ? NgxLoggerLevel.LOG : NgxLoggerLevel.OFF,
      // serverLogLevel
      serverLogLevel: NgxLoggerLevel.OFF

    })
  ]

environment.ts:

export const environment = {
  production: false,
  isDebugMode: true,
  lang: 'en',
  api: {
          grant_type: 'password',
          clientId: 'sugar',
          clientSecret: '',
          host: "https://blablabla.com:44375/rest/v11_1/",
          platform: 'custom_api',
        },
};

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

my goal: finding a better logger level implementation instead of hard-coding

Answer 1

Here's a solution that I took a few days ago, facing the same task:

In app-module.ts:

import { LoggerModule, NgxLoggerLevel, NGXLogger, LoggerConfig } from 'ngx-logger';

//...
@NgModule({
 declarations: [
   // ...
 ],
 imports: [
   LoggerModule,
   // ...
 ],
 providers: [   
   {
     provide: LoggerConfig, useFactory: () => Utility.loadJson<LoggerConfig>('/assets/loggerConfig.json', //
       { // defaults, in case file is not found:
         level: NgxLoggerLevel.WARN,
         // serverLoggingUrl: '/api/logs',
         // serverLogLevel: NgxLoggerLevel.OFF,
         // disableConsoleLogging" : true
       })
   },
   NGXLogger,
   //...
 ]

Then have your utility-method ready:

export class Utility {

  static loadJson<T>(file: string, defaultObject: T, onError = (event) => null ): T {
    const request = new XMLHttpRequest();
    request.open('GET', file, false);
    request.onerror = onError;
    if (request.overrideMimeType) {
      request.overrideMimeType('application/json');
    }
    request.send();
    if (request.status === 200) {
        return <T>JSON.parse(request.responseText);
    }
    return defaultObject;
  }
  // ...

Then create your loggerConfig.json file in src/assets:

{
 "// levels:": "TRACE=0, DEBUG=1, INFO=2, LOG=3, WARN=4, ERROR=5, FATAL=6, OFF=7",  
 "level": 1, 
 "// serverLogLevel" : 5, 
 "// serverLoggingUrl": "/api/logs", 
 "// disableConsoleLogging" : true 
}

Now add loggerConfig.json to your gitignore-file and push the changes: You don't want developers overriding each other's settings.

The idea is, that usually the provided default is used, but you have the possibility to have your own override in a configuration file.