How to configure ngx-logger in standalone components (Angular 18)

Question

I have an Angular 18 application now built on standalone component concepts. I want to use ngx-logger for logging errors, warnings and Inf to server. I have seen multiple articles about ng-logger in modular patterns and there are no references to how to use them in Standalone components.

Please guide me on how I can do it.

The code I had written is giving compilation issues when I added LoggerModule.forRoort({....}).

For resolving errors I commented the .forRoot({..}) part.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LoggerModule, NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    LoggerModule
    // .forRoot({
    //   serverLoggingUrl: '/api/logs',
    //   level: NgxLoggerLevel.DEBUG,
    //   serverLogLevel: NgxLoggerLevel.ERROR
    // })
  ],
  providers: [
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Hello';

  constructor(
    private logger: NGXLogger) {
    this.logger.debug("Debug message");
    this.logger.info("Info message");
    this.logger.log("Default log message");
    this.logger.warn("Warning message");
    this.logger.error("Error message");
  }
}

Output:

R3InjectorError(Standalone[_AppComponent])[NGXLogger -> NGXLogger -> TOKEN_LOGGER_CONFIG -> TOKEN_LOGGER_CONFIG]: 
  NullInjectorError: No provider for TOKEN_LOGGER_CONFIG!
    at NullInjector.get (eval at instantiateModule (file:///aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13862:21)
    at R3Injector.get (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:14755:27)
    at R3Injector.get (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:14755:27)
    at injectInjectorOnly (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13595:36)
    at Module.ɵɵinject (eval at instantiateModule (file://aaaaa/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52905:24), <anonymous>:13601:59)
    at Object.NGXLogger_Factory [as factory] (eval at instantiateModule

David Yee · Accepted Answer · 2024-11-21 21:22:26Z

Following the guide from Angular on standalone components, you can setup older libraries like ngx-logger using the importProvidersFrom utility:

If a library only offers an NgModule API for its DI configuration, you can use the importProvidersFrom utility to still use it with bootstrapApplication and other standalone contexts:

In main.ts you have bootstrapApplication:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

In app.config.ts:

import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
import {provideRouter} from '@angular/router';
import {routes} from './app.routes';
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({eventCoalescing: true}),
    provideRouter(routes),
    importProvidersFrom(LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR
    })),
  ]
};

nts_98 · Accepted Answer · 2025-04-14 11:39:37Z

1

If you want to have the configuration in another file you would use:

importProvidersFrom(
        LoggerModule.forRoot(undefined, {
            configProvider: NGX_FACTORY_PROVIDER,
            ruleProvider: NGX_RULE_PROVIDER,
        }),
    ),

undefined refers to the default config but since i'm using a configuration provider, it's undefined.

In my config file i have:

export const NGX_RULE_PROVIDER: ClassProvider = {
    provide: TOKEN_LOGGER_RULES_SERVICE,
    useClass: LoggerRules,
}

export const NGX_FACTORY_PROVIDER: FactoryProvider = {
    provide: TOKEN_LOGGER_CONFIG,
    useFactory: loggerConfigFactory,
    deps: [ConfigService],
}

answered Apr 14 at 11:39

nts_98

111 bronze badge

Collectives™ on Stack Overflow

How to configure ngx-logger in standalone components (Angular 18)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related